在div中垂直对齐li项目

我有内联显示的列表项目。我想在绿色div内垂直对齐它们。在div中垂直对齐li项目

<div id="topMenu" class="topMenu"> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Documents</a></li> 
    <li><a href="#">Articles</a></li> 
    <li><a href="#">Info</a></li> 
    </ul> 
</div> 

.topMenu li 
{ 
    display: inline; 
    list-style-type: none; 
    padding-right: 20px; 
} 

.topMenu a 
{ 
    color: White; 
    font-weight: bold; 
    text-decoration: none; 

} 
.topMenu 
{ 
    background-position: center; 
    background-color: Green; 

    height: 30px; 
    font-family: arial, Helvetica, sans-serif; 
    font-size: 0.8em; 
    vertical-align: middle; 
    text-align:center; 

}

在线demo

来源

2010-07-24 ilann

你可以添加line-height:30px;您li元素（一样的菜单栏的高度）

Demo

来源

2010-07-24 20:35:11

您可以只是你<li>元素位的显示，这样的：

.topMenu li 
{ 
    display: inline-block; 
    list-style-type: none; 
    padding: 6px 10px; 
}

Check out an updated demo here

或者，你可以填充添加到<ul>用新规则：

.topMenu ul { 
    padding-top: 6px; 
}

Check out that version here

在您可能想要删除从.topMenu的height，让顶部/底部填充确定它无论是哪种情况，因此，当与旧的浏览器缩放网页尺度它仍然看起来“正确的”。

来源

2010-07-24 20:20:00

有没有硬编码填充一个更普遍的方式是什么？ – ilann 2010-07-24 20:26:05

我想我需要高度，因为我会在该div中使用背景图像，所以我需要特定的高度。 – ilann 2010-07-24 20:43:08

如果您想要严格xhtml并删除vertical-align，则必须使用填充属性。

此外，尝试垂直排列某些内容是没有意义的，即内联显示。

只要考虑：填充是元素和boxmodel边框之间的内部空间。

来源

2010-07-24 20:24:20 ChrisBenyamin

你是什么意思没有意义？我希望项目出现在div的中心。 – ilann 2010-07-24 20:32:05

的Internet Explorer不支持inline-block的，直到版本8

你可以尝试变通here。

来源

2010-07-24 20:27:46 DOK

display：inline; IE 7不支持？ – ilann 2010-07-24 20:34:04

@ilann我相信IE7支持内联而不是内联块。这里有一个来源http://www.quirksmode.org/css/display.html。和另一个http://www.webdeveloper.com/forum/showthread.php?t=192848 – DOK 2010-07-24 20:38:21

，但我没有使用内联块... – ilann 2010-07-24 20:48:18

在div中垂直对齐li项目

回答

相关问题