文本换行

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;。