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

#html #css #fieldset

#HTML #css #набор полей

Вопрос:

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

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

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

Ответ №1:

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

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

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

Ответ №2:

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

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

form
{
    text-align: center;
}

Пример: http://jsfiddle.net/CKqxQ /

1. Настройка выравнивания текста для элемента переноса будет излишней, если набор полей отображается на уровне блока с автоматическими левыми и правыми полями.

2. @lthibodeaux У некоторых старых версий IE могут возникнуть проблемы без него, поэтому я обычно размещаю его. Это постороннее, хотя для любых новых браузеров.

3. Это не решает проблему. Только родительский элемент переноса настраивается по центру. Содержимое не будет центрироваться по центру компонента

Ответ №3:

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

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

Ответ №4:

Вы также можете поместить fieldset подобное:

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

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

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

Ответ №5:

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

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