Как использовать вертикальное выравнивание: середина; должным образом? - PullRequest
Новая
       7

Как использовать вертикальное выравнивание: середина; должным образом?

3 голосов
/ 13 марта 2010

Я хочу, чтобы мой список (nav) был выровнен по центру изображения (логотипа). Я попытался использовать vertical-align: middle;, но не смог заставить его работать, когда я перемещал изображения влево и вправо.

Вот мой код:

HTML: 

<div id="head">
    <img id="logo" src="logo.png" />
    <ul id="nav">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>

CSS: 

#head {
    margin-top: 2px;
    width: 100%;
}
    #logo {
        float: left;
        }

    ul#nav {
        float: right;
        }

        ul#nav li {
            display: inline;
            list-style-type: none;
            }

Я взял все vertical-align: middle; с того места, где я их положил (я проверял его в каждом элементе, хотя он должен был применяться только к #logo, из того, что я прочитал).

В любом случае, любая помощь будет признательна.

Ответы [ 2 ]

2 голосов
/ 13 марта 2010

Vertical-align:middle выравнивает медиану дочернего элемента по медиане родительского элемента. Если все дочерние элементы имеют float:left, то родительский элемент имеет высоту 0px и, следовательно, его медиана выше дочерних элементов.

Итак, вы можете добавить <br style='clear:both' /> после вашего меню, и DIV, наконец, получит свой вертикальный размер.

0 голосов
/ 15 января 2012

таблица с одной строкой здесь пригодится. 

<div id="head">

<table>
<tr>

<td>
  <h1>Fluid Heading</h1>
</td>

<td style="width: 5%">
  <img id="logo" src="logo.png" />
</td>

<td style="width: 5%">
  <ul id="nav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</td>

</tr>
</table>

</div>

CSS: 

.head td { vertical-align: middle; }
...