如何居中垂直列表？

我不能將文本居中在垂直列表中。麻煩的是當一個訂單項居中時，兩個訂單項分散。如何居中垂直列表？

的代碼是：

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

來源

2014-01-23 Bushra

請提供一個工作示例。例如：訪問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/

來源

2014-01-23 13:49:11 Azuken

謝謝！我已經嘗試過，但它不起作用。 – Bushra

如果我明白你的問題正確的，那麼vertical-align: middle;是要走的路，但vertical-align僅適用於線高度，以便它不會爲一個塊元素工作。

所以你需要做的是讓你的LI到inline-block元素，然後將vertical-align: middle應用到他們。

Example on JSFiddle

這不是一個100％pulletprofe解決方案，但它會在大多數MODEN瀏覽器。

來源

2014-01-23 14:09:31 Lasse

我已經嘗試過但它不起作用。謝謝！ – 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/

來源

2014-01-29 13:25:52 Bushra

如何居中垂直列表？

回答

相關問題