如何居中垂直列表？

问题描述：

我不能将文本居中在垂直列表中。麻烦的是当一个订单项居中时，两个订单项分散。如何居中垂直列表？

的代码是：

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

请提供一个工作示例。例如：访问http://jsfiddle.net/并填写一些HTML和CSS，按'Run'查看它是否按照您的预期工作，然后按下'Save'并在您的问题中分享网址。 – ANeves

感谢您的回答。以下是一个示例：http://jsfiddle.net/uZmQL/ – Bushra

答

如果我理解你的问题，你有一个简单的HTML列表，要居中文本？

是你想做的吗？

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

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

谢谢！我已经尝试过，但它不起作用。 – Bushra

答

如果我明白你的问题正确的，那么vertical-align: middle;是要走的路，但vertical-align仅适用于线高度，以便它不会为一个块元素工作。

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

Example on JSFiddle

这不是一个100％pulletprofe解决方案，但它会在大多数MODEN浏览器。

我已经尝试过但它不起作用。谢谢！ – Bushra

答

我解决了它通过添加一个类到单行链接。

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/

如何居中垂直列表？

相关推荐