несколько элементов в строку

[mafinok]

не могу понять - такая конструкция:

  <div class="header">
  <div class="field1">FIELD1</div>
  <div class="field2"><a href="#" class="logo"></a></div>
  <div class="field3">FIELD3</div>
    </div>

.header {
text-align:center;
  width:100%;
  height:200px;}
a.logo{background: url(img/logo.png) no-repeat; display:block;width:360px;height:131px;}
.field1,.field2,.field3{width:360px;height:131px;display:inline-block;}

центральный блок, который содержит ссылку рисуется на уровень выше двух остальных. помогите выровнять их на одном уровне.

[tius]

вариант 1:

.field1,.field2,.field3{width:160px;height:131px;display:inline-block; vertical-align: middle; line-height: 131px}

вариант2:

.field1,.field2,.field3{width:360px;height:131px; display:block; float: left;}

+внешнему div.header задать ширину и выровнять по центру методом margin: 0 auto;

[mafinok]

1й отлично работает, спасибо.

для 2го обязательна ширина .header-а на 100% экрана, делаю контейнер .middle{margin:0 auto;}>.field1,.field2,.field3 для выравнивания элементов по центру, но выравнивает по центру только если явно задать его ширину, как поправить.

покрасил .middle в красный цвет и добавил position:absolute; - ширина стала по содержимому, но {margin:0 auto} не работает

Edited October 1, 2012 by mafinok

[tius]

указать ширину. для всех полей ширина у вас итак фиксирована.