如何垂直对齐 <ul> 中的 <li> 元素？答案

【问题标题】：How to vertically align <li> elements in <ul>?如何垂直对齐 <ul> 中的 <li> 元素？
【发布时间】：2018-02-21 15:08:57
【问题描述】：

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

【问题讨论】：

w3schools.com/css/css_navbar.asp - 我知道这已经得到解答，但如果有人从现在开始看到这个，我会发现这很有帮助

标签： css

【解决方案1】：

这是一个很好的：

将line-height 设置为等于height 的任何值；像魅力一样工作！

例如：

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

【讨论】：

你能用一个小例子详细说明吗？
完美 - 行高：30px；在浮动
上是我需要的（Chrome）

如果分成两行会怎样？

是的，只有不超过一行文本才可行。

这是唯一对我有用的东西。其他答案无效。

【解决方案2】：

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

【讨论】：

谢谢，这部分有效。也就是说，后箱的内容是居中的，但是我如何将箱子本身居中？
不，不，在列表的中间。在此特定示例中，最后一个框应低于前三个。
@akonsu - 我改变了它，虽然我没有在除 FireFox 之外的任何东西上测试它。让我知道它是否合适。
理查德，非常感谢您的帮助。我不知道这些显示类型。不幸的是，IE7 不支持它们。我找到了一种对齐每个
内容的方法：ampsoft.net/webdesign-l/vertical-aligned-nav-list.html 但似乎没有跨浏览器的方式来对齐
在

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

【解决方案3】：

您可以为此使用 flexbox。

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

关于如何使用flexbox的详细说明可以找到here。

【讨论】：

【解决方案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;
}

【讨论】：