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

Question

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

我有一个横向<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ric*_*uen 71

我假设因为你使用的是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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 71

这是一个很好的:

设置line-height等于什么height; 奇迹般有效!

例如:

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

Run Code Online (Sandbox Code Playgroud)

This doesn't work at all if the text is more than one line (8认同)
如果它分成两行会发生什么？ (3认同)
我认为这个答案需要一个绿色的复选标记.[= (2认同)
是的，仅适用于不超过一行的文本。 (2认同)

Answer 3

dim*_*ech 30

您可以使用flexbox.

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

Run Code Online (Sandbox Code Playgroud)

有关如何使用flexbox的详细说明,请参见此处.

Answer 4

小智 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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，1 月前
查看次数：	341906 次
最近记录：	7 年，6 月前