虽然这不是一个与WordPress相关的问题,应该在StackOverflow 相反,要垂直对齐菜单项,您至少有3个选项。假设您的HTML结构如下所示:
<nav>
<ul>
<li>
<a href="#">My FIRST ITEM</a>
</li>
<li>
<a href="#">My SECOND ITEM</a>
</li>
</ul>
</nav>
Option 1 将锚点的线高度设置为与其父锚点相同的高度。让我们说你的
<nav>
高度为75px。还应将锚点线高度设置为75px:
.nav a {
line-height:75px;
}
不必这样
<nav>
. 在这种情况下,它的父级可以是以下任一项:
<nav>
,
<ul>
或
<li>
.
Option 2 为锚点的父锚点指定一个高度,然后垂直对齐锚点:
.li {
height:75px;
}
.li a {
vertical-align:middle;
}
Option 3 给你的锚一些衬垫。设置顶部和底部的填充:
.nav a {
padding:25px 0;
}
尝试增加/减少填充量,直到锚点位于线的中间。
所有这些都将产生相同的效果。然而,它们在其他属性(如背景颜色)中的行为可能会有所不同。