Question

我正在处理的菜单高度为40像素，并设置为display: inline-block，以便更容易点击。但是，我无法将文本垂直对齐到中间。

面临的挑战是使用vertical-align: middle显示文字，同时不使用table属性的任何display相关值，这是便宜的我试图确定如何做到这一点。

这是我现在拥有的......

XHTML

<div id="menu">
<div><a class="menu" href="blog/" tabindex="2">Blog</a></div>
<div><a class="menu" href="contact/" tabindex="2">Contact</a></div></div>
</div>

CSS

#menu {height: 40px;}
#menu > div {display: block; float: left; height: 100% !important;}
#menu > div > a {color: #fff; height: 40px; display: inline-block !important; text-align: center; vertical-align: middle; width: 100px;}

Answer 1

指定line-height等于框height，使其垂直对齐中间。

#menu > div > a {
    color: #000;
    height: 40px;
    display: inline-block !important;
    text-align: center;
    vertical-align: middle;
    width: 100px;
    line-height: 40px; /* added this line */
}

Demo

CSS垂直对齐中心块或内联块锚元素

1 个答案: