Question

我正试图找出一种在div中垂直居中无序列表的方法。我找到了很多方法来做到这一点，但是我的ul标签中的li标签中有PHP代码，它们从数据库中获取文本，这导致li标签内文本的长度变化很大，导致内部垂直筛选我的div有一个固定的高度和宽度。

如何垂直定位我的无序列表，以便它始终在此div中垂直对齐？

Answer 1

如果您尝试水平居中，这里有一些代码可以适用于任何长度：

HTML：

<div>
    <ul>
        <li><a href="#">Element 1</a></li>
        <li><a href="#">Element 2</a></li>
        <li><a href="#">Element 3</a></li>
        <li><a href="#">Element 4</a></li>
    </ul>
</div>

CSS：

div { overflow: hidden; }
ul { 
    position: relative;
    float: left;
    left: 50%;
    padding: 0;
    list-style: none; }
li { 
    position: relative;
    float: left;
    right: 50%;
    margin: 0 5px; }

对于垂直居中，只需使用vertical-align属性即可请参阅：http://jsfiddle.net/Wexcode/fK793/

Answer 2

这很简单。只需使用display:table;作为父div，display:table-cell;和vertical-align:middle;作为孩子。

小提琴：https://jsfiddle.net/fzfa312m/

div { 
    background: #f2f2f2;
    width: 300px; 
    height: 300px; 
    display:table; }

ul {
    vertical-align: middle; 
    display: table-cell; }

<div>
    <ul>
        <li><a href="#">Element 1</a></li>
        <li><a href="#">Element 2</a></li>
        <li><a href="#">Element 3</a></li>
        <li><a href="#">Element 4</a></li>
    </ul>
</div>

如何将div中的动态内容无序列表居中？

2 个答案: