Форматирование формы - центрировать форму и выровнять ее поля по левому краю

Question

Я пытаюсь центрировать форму и выровнять по левому краю некоторые поля внутри нее. Каждый раз, когда я выравниваю их по левому краю - они не находятся в центре веб-страницы, и каждый раз, когда я центрирую форму, они больше не выравниваются по левому краю. У меня есть поля флажка. Как я должен идти об этом? DIV? Таблица? другой

Вот код jsFiddle: http://jsfiddle.net/lucyw/FN5BH/13/

Спасибо!

Answer 1

Ниже приведен довольно стандартный способ достижения желаемого конечного результата:

HTML

<div class="container">
  <form>
    <label>foo</label>
    <input type="text" name="foo"/>
    <label>fooo</label>
    <input type="text" name="fooo"/>
    <label>foooo</label>
    <input type="text" name="foooo"/>
  </form>
</div> 

CSS

.container   { width:300px; background-color:#222; overflow:hidden;
               padding:10px; }
form         { color:#FEFEFE; width:250px; margin:0 auto;
               background-color:#F62; }
label, input { float:left; }
label        { clear:left; display:block; width:60px; }

http://jsfiddle.net/JQttx/3/