Question

我读过许多关于垂直居中的文章，但我担心其中很多都不直观，因此无法将其应用于我的问题。基本上，我有一个主div，在那里，我有无序列表，其中有一个图像和段落标记，并使用内联块显示。这方面的工作很好。

问题或我想要实现的是将列表置于屏幕中间。因此，例如，如果我在列表中只有一个项目，它应该在中间，然后在列表中输入更多项目时向上移动。

<div id = "main">
    <ul>
        <li>
            <img src="test.jpg" alt="#" />
            <p>Lorem ipsum</p>          
        </li>
    </ul>
</div>

#main {
    margin: 60px auto;
    height: 400px;
} 
#main ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0 13px 72px 22px;
    height: 100px;  
}

#main ul { 
    text-align: center;
}

Answer 1

不完全确定您要尝试做什么，但这是一个可能的解决方案。这个技巧就是行高。

编辑：这应该这样做......

http://jsfiddle.net/cxmsr/4/


#main
{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: 0px;
    top: 0px;
    height: 400px;
    background-color: #999999;
    display: table;
}
#main UL
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#main LI
{
    display: inline-block;
    background-color: #CCC;
    margin: 2px 2px 6px;
    height: 100px;
}

您可以将#main width更改为100％或任何您需要的值。

Answer 2

这是一个简单的解决方案。我添加了边框以使结果更容易看到。

    #main {
        margin: 60px auto;
        height:600px;
        display: table-cell;
        vertical-align: middle;
        border:1px solid #d0d0d0
    } 



    #main ul li {
        display: block;
        margin: 0 13px 72px 22px;
        height: 100px;
        border:1px solid #ff0000; 
}

Answer 3

以下是使用css3中的灵活盒模型的示例：http://jsfiddle.net/zgzct/1/

flexbox的规格只是改变了很多，浏览器支持不一致，所以如果适合你的话，请使用Diodeus的解决方案。

列表项的垂直居中

3 个答案: