Центрировать поле с помощью CSS

Question

Я пытаюсь центрировать набор полей, содержащий поля «логин» и «пароль», в центре страницы.Вот что у меня есть:

fieldset{
  border: 1px solid rgb(255,232,57);
  width: 400px;
  float: left;
}

Я хочу, чтобы набор полей центрировался в окне независимо от размера окна.Поиск в Google ничего полезного, например, атрибуты float: center или align: center.

Answer 1

Нет float: center, только слева и справа.Float просто позволяет элементам уровня блоков выстраиваться горизонтально, вынимая их из стекового потока.Это похоже на display:inline-block за исключением того, что выравнивает их по направлению поплавка.

То, что вы хотите, это установить поля автоматически.Если вы хотите выровнять по центру узлы внутри fieldset, вы можете добавить text-align:center; к этому:

fieldset{
  border: 1px solid rgb(255,232,57);
  width: 400px;
  margin:auto;
}

Answer 2

Элемент, обертывающий его, вероятно, нуждается в выравнивании текста: center;на нем, а затем вам нужно установить поля для набора полей;

fieldset{
  //other stuff
  margin: 0 auto;
  text-align: left;
}

form
{
    text-align: center;
}

Образец: http://jsfiddle.net/CKqxQ/

Answer 3

Вы также можете поставить fieldset так:

<div style="text-align:center">
    .......fieldset here........
</div>

Примечание: это также влияет на выравнивание текста fieldset, поэтому, если вы хотите, чтобы текст внутри fieldset был выровнен по левому или правому краю, вы можете использовать:

<fieldset style="text-align:left">

Answer 4

просто удалите float:left и добавьте margin: 0 auto;, потому что float:left держит ваш элемент слева от родительского элемента.(Предполагая, что ширина родительского элемента превышает 400 пикселей;) ваш новый CSS будет выглядеть следующим образом.

fieldset{
  border: 1px solid rgb(255,232,57);
  width: 400px;
  margin: 0 auto;
}

Answer 5

Кто-то попробует это ... на самом деле, просто используйте это, потому что это работает!

fieldset {
  font-size:14px;    padding:5px;    width:500px;    line-height:1.8;    margin: 0 auto;    
 }