Переносить текст в вертикальном меню

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

Просто используйте vertical-align: top на вашем <li> с. Пожалуйста, обратите внимание, что все идентификаторы должны быть уникальными, так что это недопустимый 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> 

Final демо: http://jsfiddle.net/eXKdG/

_Update

Как я не заметил вертикальное центрирование текста внутри блочного уровня <a>: tesdki в тег находится прямо, просто используя display: table-cell; на <a> -tags.