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

96

我有一个水平线<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>

css

— 阿孔苏
source

w3schools.com/css/css_navbar.asp-我知道已经回答了，但万一有人从现在开始看，我发现这很有帮助

— JabbaWook

75

我假设由于您使用的是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>

— 理查德JP Le Guen
source

1

谢谢，这部分起作用。也就是说，后箱的内容居中，但是我如何使箱本身居中？

— akonsu

不，不，列表的中间。在此特定示例中，最后一个框应低于前三个框。

— akonsu

@akonsu-我更改了它，尽管我没有在FireFox以外的任何软件上对其进行测试。让我知道是否合适。

— 理查德JP Le Guen

1

理查德，非常感谢您的帮助。我不知道这些显示类型。不幸的是，IE7不支持它们。我找到了一种方法来对齐每个<li>的内容：ampsoft.net/webdesign-l/vertical-aligned-nav-list.html，但似乎没有跨浏览器的方法来对齐<ul>内的<li>。 ..

— akonsu

1

如果您以IE7为目标，为什么要<?xml?>声明？IE的所有版本都不真正支持XHTML。我认为您可能需要阅读“将XHTML作为text / html认为有害”的内容：hixie.ch/advocacy/xhtml

— Richard JP Le Guen 2010年

75

这是一个很好的：

设置为line-height等于height。奇迹般有效！

例如：

li {
    height: 30px;
    line-height: 30px;
}

— 涉水
source

1

您能举一个小例子吗？

— Leigh 2012年

1

完美-行高：30px；我需要的是浮动<li>上的（Chrome）

— GuruBob

1

如果它分为两行会怎样？

— Mahesh

1

是的，仅适用于一行文本。

— Wanny Miarelli'3

1

这是唯一为我工作的方法。其他答案无效。

— adev

34

您可以为此使用flexbox。

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

可以找到有关如何使用flexbox的详细说明此处。

— 暗淡
source

4

我有同样的问题。试试这个。

<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;
}

— 赫萨普·亚当
source