logo标签列表

如何在 <ul> 中垂直对齐 <li> 元素？

css
118

我有一个水平的 <ul>，我需要垂直居中其中的每个 <li>。我的标记如下所示。每个 <li> 都有一个边框，我希望项目及其内容在垂直方向上都居中对齐。请帮忙；我对CSS还很陌生。


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .toolbar li
        {
            border: solid 1px black;
            display: block;
            float: left;
            height: 100px;
            list-style-type: none;
            margin: 10px;
            vertical-align: middle;
        }
        .toolbar li.button
        {
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <ul>
            <li><a href="#">first item<br />
                first item<br />
                first item</a></li>
            <li><a href="#">second item</a></li>
            <li><a href="#">last item</a></li>
            <li class="button"><a href="#">button<br />
                button</a></li>
        </ul>
    </div>
</body>
</html>
http://www.w3schools.com/css/css_navbar.asp - 我知道这个问题已经有答案了，但以防从现在开始有人查看这个页面，我觉得这个链接很有帮助。 - JabbaWook
4个回答
91

这里有一个好方法：

将line-height设置为与height相等；非常有效！

例如：

li {
    height: 30px;
    line-height: 30px;
}
1
你能举个小例子详细说明吗？ - Leigh
1
完美 - 在浮动的<li>上使用line-height: 30px;正是我所需要的（Chrome） - GuruBob
简单而有效。谢谢。 - Samuel Ramzan
3
如果它分成两行会发生什么？ - Mahesh
2
是的，仅限一行文本才可行。 - Wanny Miarelli
1
这是唯一对我起作用的方法。其他答案都不行。 - adev
77

我假设您使用XML声明，因此您不必担心IE或旧浏览器的兼容性问题。

所以您可以这样使用display:table-cell和display:table-row：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .toolbar ul {
            display:table-row;
        }
        .toolbar ul li
        {
            display: table-cell;
            height: 100px;
            list-style-type: none;
            margin: 10px;
            vertical-align: middle;
        }
        .toolbar ul li a {
            display:table-cell;
            vertical-align: middle;
            height:100px;
            border: solid 1px black;
        }
        .toolbar ul li.button a {
            height:50px;
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <ul>
            <li><a href="#">first item<br />
                first item<br />
                first item</a></li>
            <li><a href="#">second item</a></li>
            <li><a href="#">last item</a></li>
            <li class="button"><a href="#">button<br />
                button</a></li>
        </ul>
    </div>
</body>
</html>
1
谢谢，这部分有效。也就是说，后面的框中的内容已经居中了，但是如何使框本身居中呢？ - akonsu
不，不是列表的中间。在这个特定的例子中，最后一个框应该比前三个低。 - akonsu
@akonsu - 我已经进行了更改，虽然我只在FireFox上进行了测试。如果适用，请告诉我。 - Richard JP Le Guen
1
Richard，非常感谢你的帮助。我不知道这些显示类型。不幸的是，它们在IE7中不受支持。我找到了一种方法来对齐每个<li>的内容：http://www.ampsoft.net/webdesign-l/vertical-aligned-nav-list.html，但貌似没有跨浏览器的方法可以将<li>对齐在<ul>内部... - akonsu
1
如果你的目标是IE7，那为什么还要有一个<?xml?>声明？所有版本的IE实际上并不支持XHTML。我认为你可能需要阅读“将XHTML作为text/html发送被视为有害”的文章：http://hixie.ch/advocacy/xhtml。 - Richard JP Le Guen
1
display: table 是用于表格的。这只是一个解决方法。 - Ian Steffy
55

你可以使用flexbox来实现这个。

ul {
    display: flex;
    align-items: center;
}

如何使用flexbox的详细说明可以在这里找到。

5
我遇到了同样的问题。尝试这个。
<nav>
    <ul>
        <li><a href="#">AnaSayfa</a></li>
        <li><a href="#">Hakkımızda</a></li>
        <li><a href="#">İletişim</a></li>
    </ul>
</nav>


@charset "utf-8";

nav {
    background-color: #9900CC;
    height: 80px;
    width: 400px;
}

ul {
    list-style: none;
    float: right;
    margin: 0;
}

li {
    float: left;
    width: 100px;
    line-height: 80px;
    vertical-align: middle;
    text-align: center;
    margin: 0;
}

nav li a {
    width: 100px;
    text-decoration: none;
    color: #FFFFFF;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接