Question

我无法将文本置于垂直列表中心。问题是当一个订单项居中时，两个订单项会分散。

代码是：

/*This is the one which works with more than one line links*/
 .enlaces .enlacePortada a{
    display: block;
    padding: 0em 0.1em;
    margin:auto;    
}


/*The following works with single line links: */ 
.enlaces .enlacePortada a{
    display: block;
    padding: 0em 0.1em;
        margin-top: 0.2em; 
    margin: 0.4em auto 0.3em auto;
}

我也尝试过：

vertical-align: middle;
text-align: center;
align-content: center;

并且没有任何变化。

以下是极简主义示例：http://jsfiddle.net/uZmQL/

Answer 1

如果我了解您的问题，您有一个简单的HTML列表，并且您想要将文本居中？

你想做什么？

li {
    border: 1px solid black;
    margin: 2px;
    text-align: center;
}

http://jsfiddle.net/L9R7n/1/

Answer 2

如果我理解你的问题是正确的，那么vertical-align: middle;是可行的方法，但vertical-align仅适用于行高，因此它不适用于块元素。

所以你需要做的就是将你的LI带到inline-block个元素，然后将vertical-align: middle应用到它们。

Example on JSFiddle

这不是100％的pulletprofe解决方案，但它适用于大多数现代浏览器。

Answer 3

我通过在单行链接中添加一个类来解决它。

CSS：

.enlacesLine1 {
    line-height: 40px;
}

HTML：

<div > 
    <ul > 
        <li class="titulo"> SERVICES</li>
        <li class="enlaces enlacesLine1"> 
            <a href="">Service 1</a> </li>
        <li class="enlaces enlacesLine1"> 
            <a href="">Service 2</a></li>
        <li class="enlaces"> 
            <a href="">Service 3-1 <br/> Service 3-2</a></li>
    </ul> 
</div>

您可以在http://jsfiddle.net/uZmQL/2/

中查看整个示例

如何将垂直列表居中？

3 个答案: