我发现这个问题已经被问过很多次了,但我认为我的情况略有不同。
我正在处理的网站的导航是用无序列表构建的,如下所示:
<div class="nav_root nav_area_top">
<ul class="nav_root_wrap">
<li class="nav_parent first">
<a href="california.providence.org/torrance/pages/Locations.aspx">
Locations
</a>
</li>
<li class="nav_parent first">
<a href="california.providence.org/torrance/pages/Locations.aspx">
Health Services
</a>
</li>
</ul>
</div>
...
.nav_area_top ul.nav_root_wrap > li
{
background-image: url(../images/vert_bg_blue.jpg);
background-color: #0C83BB;
padding: 4px 15px 4px 15px;
float: left;
font-size: 13px;
margin-left: 3px;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
min-height: 36px;
text-align: center;
border: 0px;
}
.nav_area_top ul.nav_root_wrap > li > a
{
color:#fff;
padding: 0px;
line-height: 18px;
}
Which renders to:
正如您所看到的,有些导航项是一行,有些是两行。
我是否可以将单行项目垂直对齐:居中?
添加此样式(必要时覆盖)
.nav_area_top ul.nav_root_wrap > li {
line-height: 36px;
}
.nav_area_top ul.nav_root_wrap > li > a {
line-height: normal; /* or just choose another value: e.g. 1.5; */
vertical-align: middle;
display: inline-block;
*zoom: 1;
*display: inline;
}
最后两个属性是必要的内联黑客IE<8
正确渲染inline-blocks
element
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)