Как централизовать плавание на экране (по горизонтали и по вертикали) с помощью CSS

Question

Как централизовать плавание на экране (по горизонтали и по вертикали) с помощью CSS

0

Добрый день,

Я хотел бы создать область, расположенную в центре экрана, используя поплавки с фиксированными значениями как по ширине, так и по высоте. эта область должна быть централизована даже при изменении размера экрана. моя цель - централизовать на экране поле "Пароль", "Вход в систему" и изображение. эти элементы должны быть размещены внутри плавающего элемента, который должен быть централизован на экране.

Буду признателен за вашу помощь.

благодаря,

Thor My 21 март 2014, в 18:21

Источник

0

«Эти элементы должны быть размещены в пределах поплавка, который должен быть централизован на экране». Я думаю, вы не знаете, что означает float для CSS. Пожалуйста, предоставьте код того, что вы уже пробовали.
Nico O 21 март 2014, в 16:51
0

Привет, Нико, я создал и централизовал поплавок по горизонтали, но я также хочу централизовать его по вертикали. Я поместил все эти элементы в поплавок, и он работал, но, к сожалению, не централизован по вертикали.
Thor My 21 март 2014, в 16:56

Теги:

html

css

css-float

3 ответа

1

Вот что я просто взбивал:

position:absolute; div всегда будет центром, независимо от высоты и ширины браузера.

Форма, которую я просто бросил, чтобы доказать, что она работает.

JsFiddle

HTML:

<div>
  <form>
      <input style='width:45%;float:left;' placeholder='Username'/>
      <input style='width:45%;float:right;' placeholder='Password'/>
      <input style='width:45%;float:left;' placeholder='email'/>
      <input style='width:45%;float:right;' placeholder='favourite color'/>
      <p style='clear:both;'></p>
      <input type='submit' value='Go'/>
  </form>
</div>

CSS:

html,body{
    margin:0;
    border:0;
}
div{
    height:500px;
    width:500px;
    background:red;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

Albzi 21 март 2014, в 15:00

0

Привет JsFiddle, этот код выше работал, как мой сделал. он центрируется по горизонтали. но когда я изменяю размер окна, оно не меняет размеры верхнего и нижнего полей, как это происходит с левым и правым полями.
Thor My 21 март 2014, в 17:05

0

я думаю, что это то, чего вы ожидаете здесь для jsfiddel

все, что я сделал, - это балансировать высоту/ширину с запасом и, так как она%, а не в px, она всегда останется в центре

<div class="center"><input type="text"><input type="password"></div>

и css

    .center {
    background: none repeat scroll 0 0 #444444;
    height: 50%;
    margin: 25%;
    position: absolute;
    width: 50%;
    }
    .center input {
    display: block;
    margin: auto;
    width: 100px;
}

sandesh mahajan 21 март 2014, в 15:19

0

Сандеш, твой код потрясающий! Большое спасибо, сэр!
Thor My 21 март 2014, в 20:38

Ещё вопросы

«Эти элементы должны быть размещены в пределах поплавка, который должен быть централизован на экране». Я думаю, вы не знаете, что означает float для CSS. Пожалуйста, предоставьте код того, что вы уже пробовали.
Привет, Нико, я создал и централизовал поплавок по горизонтали, но я также хочу централизовать его по вертикали. Я поместил все эти элементы в поплавок, и он работал, но, к сожалению, не централизован по вертикали.
Привет JsFiddle, этот код выше работал, как мой сделал. он центрируется по горизонтали. но когда я изменяю размер окна, оно не меняет размеры верхнего и нижнего полей, как это происходит с левым и правым полями.
Сандеш, твой код потрясающий! Большое спасибо, сэр!

newTag · Accepted Answer · 2014-03-21T14-42-00.000Z

Примените это к div,

   .center {
       width: 300px;
       height: 300px;
       position: absolute;
       left: 50%;
       top: 50%; 
       margin-left: -150px;
       margin-top: -150px;
    }

Отрицательные поля - это ровно половина высоты и ширины, которые возвращают элемент в идеальный центр. Работает только с элементами фиксированной высоты/ширины.

Обновлено:

См. Демонстрацию

человек ... это сработало отлично !!! Я не знаю, как тебя отблагодарить.