列表项垂直居中对齐

Question

列表项垂直居中对齐

18

我有以下的 HTML 和 CSS 创建了一个列表，其中列表项设置了最小高度。如果没有足够的内容填满整个高度，我希望列表项的内容垂直居中而不是顶部对齐。我该如何实现这个目标？

<html>
    <head>
        <style type="text/css">
            ul {
                width : 300px;
                list-style-type: none;
            }

            li {
                min-height : 45px;
                vertical-align : middle;
                border-bottom : 1px black solid;
            }
        </style>
    <head>
    <body>
        <ul>    
            <li>Testing testing 1234</li>
            <li>Testing testing 1234 Testing testing 1234</li>
            <li>Testing testing 1234 Testing testing 1234 Testing testing 1234</li>
            <li>Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234</li>
            <li>Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234</li>
       </ul>
 </body>

这给了我以下内容：

输入图像描述

- Steve

2个回答

5

噢，好老的垂直对齐。最简单的方法是设置line-height: 45px;，但这仅适用于一行内容，会强制任何附加行溢出。

否则，您可以使用display:table-cell; vertical-align: middle;，如上面的链接所示。

- scurker

我不认为那篇文章中提到的两种方法有任何一种可以奏效。其中一种假设高度固定，而我的高度并非如此；另一种方法则假设只有一行，而我的布局也不是这样的。 - Steve

3

这就是关键所在。在表格布局/CSS3之外，你无法真正地使文本垂直对齐。你唯一的选择是查看 CSS3 的新的弹性盒模型布局。 - scurker

CSS Grid还具有垂直对齐功能：https://css-tricks.com/snippets/css/complete-guide-grid/ - Shawn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dragfyre · Accepted Answer

如果你在 <li> 中添加一个 <div> 并对 CSS 进行以下更改，它看起来就能正常工作：

li {
    min-height : 45px;
    border-bottom : 1px black solid;
}
li div {
    height:45px;
    display:table-cell;
    vertical-align : middle;
}

这里可以实时查看-- 在IE8和FF4中运行: http://jsfiddle.net/RrVBh/