Как использовать вертикальное выравнивание:середина;правильно?
-
19-09-2019 - |
Вопрос
Я хочу, чтобы мой список (навигация) был выровнен по центру изображения (логотипа).Я попробовал использовать 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.)
В любом случае, любая помощь будет оценена по достоинству.
Решение
Vertical-align:middle
выравнивает медиану дочернего элемента по медиане родительского элемента.Если все дочерние элементы имеют float:left
, то родительский элемент имеет высоту 0 пикселей и, следовательно, его медиана находится над дочерними элементами.
Итак, вы можете добавить <br style='clear:both' />
после того, как ваше меню и DIV наконец-то получат свой вертикальный размер.
Другие советы
Здесь пригодится таблица с одной строкой.
<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; }