logo标签列表

如何在CSS中将LI垂直居中对齐？

htmlcsshtml-lists
3
我有以下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以达到这种效果？
5个回答
6

我猜测您想要制作一个水平列表而不是垂直列表，因为您将LI元素的显示类型设置为“inline”。所以请尝试这样做：

<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>
2

你是想要这个吗？

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

就像 Sarfraz 一样，我也不确定我完全理解这个问题。

2
将.MenuBar的line-height属性值设置为21像素。
0

可能无法完全得到您想要的，但如果您想使列表垂直显示，请尝试以下方法：

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

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

0
最优雅和可靠的方法是将一个助手内联元素插入到<li />元素中作为第一个子元素，其高度应设置为100％（其父元素<li />的高度），并将其垂直对齐设置为中间。要实现这一点，您可以放置一个<span />，但最方便的方法是使用li:after伪类。
.MenuBar li:before
{
    display: inline;
    height: 100%;
    vertical-align: middle;
    content: '';
}

这样，您就不需要硬编码高度值（例如21像素）。请参考： CSS垂直对齐li内的文本

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接