Как центрировать форму

Question

У меня есть простая форма ...

<label>name</label><input type="text" id="name">
<label>email address</label><input type="text" id="email">

Вот CSS на данный момент; входные элементы располагаются вертикально, по желанию.

<div>
    <label>name</label>
    <input type="text" id="name">
</div>
<div>
    <label>email address</label>
    <input type="text" id="email">
</div>

div
{
    padding: 5px;    
}
label
{
    display: block;
    width: 100px;
    float: left;
}

см. Скрипку здесь

Проблема в том, что я хочу, чтобы моя форма была в центре страницы. Как я могу центрировать с плавающими элементами (или как выровнять без плавающих)?

Должен работать во всех браузерах, включая IE6.

Answer 1

Смотрите обновленную скрипку здесь: http://jsfiddle.net/XpjYJ/7/

Я поместил ваш HTML внутри div. Затем я дал div фиксированную ширину и установил поле margin: 0 auto;

Answer 2

Это может помочь:

HTML:

<div>
<form>
<label>bla</label>
<input />
...
</form>
</div>

CSS:

div {margin:0 auto;}
form {width:200px;}
input {float:right;}

Answer 3

Вы можете поместить свою форму в центрированный контейнер.

В этом случае элементы формы перемещаются влево (или вправо), и вам нужно только применить горизонтальное позиционирование к контейнеру.

пример здесь

Answer 4

Используйте auto для левого и правого поля для чего-то, что охватывает ваши элементы формы (предположительно, форму).

form {
    width: 80%;
    border: solid black 1px;
    margin-left: auto;
    margin-right: auto;
}

Без указания ширины форма будет составлять 100% ширины контейнера. Черная рамка позволяет легко увидеть, что происходит.

Обновленная скрипка .