文本換行

Question

這是我的菜單

<ul id="admin-ul"> 
    <li id="admin-li" class="no1"><a href="dodaj.php">Dodaj informacije za sdf dsf dsfdddd</a></li> 
    <li id="admin-li" class="no2"><a href="pregledaj.php">Pregledaj</a></li> 
    <li id="admin-li" class="no3"><a href="veterinari.php">Veterinari</a></li> 
    <li id="admin-li" class="no4"><a href="../logout.php">Logout</a></li> 
    </ul> 

和CSS的簡單的代碼

ul#admin-ul 
{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 

li#admin-li 
{ 
    display:inline-block; 
    width:24%; 
    height:270px; 
} 

ul li a 
{ 
    display:block; 
    height:270px; 
    line-height:270px; 
    text-align:center; 
} 

我想知道如何包裝我的文字，因爲它顯示像這樣

Answer 1

試試這個：

ul#admin-ul 
{ 
    list-style-type:none; 
    margin:1em 0 0 0; 
    padding:0; 
} 

li#admin-li 
{ 
    display:table; 
    width:24%; 
    position:relative; 
    float:left; 
    overflow:hidden; 
    height:270px; 
    margin: 0 3px; 
} 

ul li a 
{ 
    display:table-cell; 
    vertical-align:middle; 
    height:270px; 
    text-align:center; 
} 

派生自：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

這不適用於IE7標準模式，但幾乎所有其他東西都很好。

Answer 2

只需在您的<li>上使用vertical-align: top即可。請注意，所有的ID必須是唯一的，所以這是無效的HTML：

<li id="admin-li" class="no1"><a href="dodaj.php"></a></li> 
<li id="admin-li" class="no1"><a href="dodaj.php"></a></li> 

可以樣式的所有<li> S比容易利用孩子選擇這樣的：

ul#admin-ul > li { 
    /* other li rules */ 
    vertical-algin: top; 
} 

可以比更新列表這樣的：

<ul id="admin-ul"> 
    <li class="no1"><a href="dodaj.php"></a></li> 
    <li class="no1"><a href="dodaj.php"></a></li> 
</ul> 

最終演示：http://jsfiddle.net/eXKdG/

_更新

由於我沒有注意到的塊級<a> - 標籤內的文本的垂直居中：tesdki是正確的，只是使用的<a>標籤都有效display: table-cell;。