CSS在中间垂直对齐LI答案

【问题标题】：CSS vertically align LI's in middleCSS在中间垂直对齐LI
【发布时间】：2011-01-23 18:25:25
【问题描述】：

我有以下 HTML，我需要 LI 元素垂直显示在 21 像素高 UL 区域的中间。这是我的 HTML...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style type="text/css">
        .MenuBar
        {
            padding: 0px;
            border: 1px solid #036;
            height: 21px;
            font-size: 8pt;
        }
        .MenuBar li
        {
            display: inline;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <ul class="MenuBar">
        <li>Link 1</li><li>Link 2</li><li>Link 3</li></ul>
</body>
</html>

如何改变上面的 HTML 来达到这个效果？

【问题讨论】：

标签： html css html-lists

【解决方案1】：

最优雅和最可靠的方法是在<li />元素中插入一个辅助内联元素作为第一个子元素，其高度应设置为100%（其父元素的高度，<li />），并将其垂直对齐设置为中间。要实现这一点，你可以放一个<span />，但最方便的方法是使用 li:after 伪类。

.MenuBar li:before
{
    display: inline;
    height: 100%;
    vertical-align: middle;
    content: '';
}

通过这种方式，您不需要硬编码高度值（21px 或其他值）。参考： CSS vertical alignment text inside li

【讨论】：

【解决方案2】：

将line-height:21px 添加到.MenuBar

【讨论】：

【解决方案3】：

我认为您正在尝试制作水平列表而不是垂直列表，因为您将 LI 元素显示类型设置为“内联”。所以试试这个：

<style type="text/css">
    .MenuBar
    {
        padding: 0px;
        border: 1px solid #036;
        height: 21px;
        font-size: 8pt;
    }
    .MenuBar li
    {
        display: inline;
        line-height: 21px;
        padding-left: 20px;
    }
</style>

【讨论】：

【解决方案4】：

这就是你所追求的吗？

    .MenuBar li
    {
        display: inline;
        padding-left: 20px;
        line-height: 21px;
    }

和 Sarfraz 一样，我不确定我是否完全理解了这个问题。

【讨论】：

【解决方案5】：

无法得到你想要的，但如果你想让列表垂直显示，试试这个：

    .MenuBar li
    {
        display: block;
        padding-left: 20px;
    }

只需将display 属性更改为block 而不是inline。这也是默认行为。

【讨论】：