Элементы навигации не совсем выровнены по вертикали
У меня есть навигационное меню с логотипом, соответствующим именем, вертикальной рамкой в качестве разделителя, а также собственно навигационными ссылками. Хотя логотип и соответствующее имя кажутся правильно выровненными, вертикальная граница и навигационные ссылки - нет. Вместо этого они отличаются примерно на 5 пикселей (я проверял в Photoshop).
Мой вопрос: Как мне убедиться, что все элементы навигации правильно выровнены, то есть они расположены по центру по вертикали внутри панели навигации?
body {
margin: 0;
}
/* Limit container width to 1200px */
.container {
max-width: 1200px;
margin: 0 auto;
}
nav {
background-color: #414b55;
}
.navigation {
overflow: hidden;
}
.logotype img {
margin: 10px 10px 10px 15px;
}
.logotype p {
display: inline;
vertical-align: middle;
font-weight: 700;
font-size: 24px;
}
.divider {
display: inline;
border-left: 1px solid #ffffff;
margin-left: 30px;
margin-right: 20px;
}
.navigation a {
display: inline;
color: #ffffff;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
.item {
padding: 15px 15px;
font-size: 18px;
font-weight: 700;
}
.navigation .icon {
display: none;
}<body>
<nav>
<div class = "container">
<div class = "navigation" id = "script-target">
<a href = "index.html" class = "logotype">
<img src = "img/logotype.svg" alt = "logotype" height = "40px" style = "vertical-align: middle">
<p>Exception</p>
</a>
<div class = "divider"></div>
<a href = "index.html" class = "item">Select</a>
<a href = "index.html" class = "item">Select</a>
<a href = "index.html" class = "item">Select</a>
<a href = "index.html" class = "item">Select</a>
<a href = "javascript:void(0);" class = "icon" onclick = "collapse()"><img src = "img/icon.svg" alt = "menu" height = "26px"></a>
</div>
</div>
</nav>
</body>Обновлять: Я изменил свойства отображения, и теперь все элементы навигации правильно выровнены. https://jsfiddle.net/MihkelPajunen/4zjbgLLk/4/
Ответы 1
Вы можете исправить это, добавив отступ в нижнюю часть класса разделителя:
https://jsfiddle.net/nb4o9p84/
.divider {
display: inline;
border-left: 1px solid #ffffff;
margin-left: 30px;
margin-right: 20px;
padding-bottom: 5px;
}
Обновлено: поскольку вы можете захотеть выровнять все элементы (а не только ссылки в меню), вот обновленная рабочий пример со всеми элементами, выровненными по полям и устранением «встроенного»:
https://jsfiddle.net/yLctgbcw/
.logotype img {
margin: 7px 10px 12px 15px;
}
.logotype p {
display: inline-block;
vertical-align: middle;
font-weight: 700;
font-size: 24px;
margin-top: -5px;
margin-bottom: 0;
}
Обновлено еще раз: Похоже, что может быть ошибка в скрипке или где-то еще, потому что горизонтальное расстояние между меню отключено на 1 пиксель, но расстояние будет меняться в зависимости от того, насколько широкая область просмотра.
Если вы добавите "margin-right: -4px;" в классе .item он оставит 1px пространства между 1 из 4, и промежуток будет перемещаться по мере изменения размера вашего окна: https://jsfiddle.net/42j3e8jp/
Если вы добавите -5 пикселей, пробел исчезнет (но, скорее всего, все еще будет разница в 1 пиксель):
https://jsfiddle.net/8udb4eqn/
Честно говоря, это одна из тех проблем, которую никто никогда не заметит, если вы не добавите красный фон к a, чтобы действительно показать проблему. Лично я бы либо реорганизовал ваш код, чтобы использовать «традиционную» настройку меню, которая используется такими библиотеками, как Bootstrap: https://getbootstrap.com/docs/3.3/examples/navbar/
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
Или я бы просто забыл о разнице в 1 пиксель и двинулся дальше, так как определение проблемы может занять гораздо больше времени, чем рефакторинг кода. Я узнал, что в CSS / HTML есть много маленьких причуд (особенно в браузерах), поэтому, если разница в 1 пиксель не заметна, это обычно не стоит усилий.
Это устранило мою проблему с вертикальной рамкой, но навигационные ссылки по-прежнему не выровнены должным образом. jsfiddle.net/MihkelPajunen/4zjbgLLk/1