我正在使用的菜单高度为40px,并设置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;}
分配一个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 */
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句