текстовый центр в <ul>

Question

Я строю панель навигации внутри ул. Большинство пунктов меню имеют длинные заголовки, поэтому мне действительно нужно заключить их в несколько строк, как в следующем коде (я вставил br /, где я хотел бы получить возврат)

     <ul>
        <li class="cell01on">Menu 1</li>
        <li class="cell02"><a href="#">Menu2.1<br/>Menu2.2<br/>Menu2.3</a></li>
        <li class="cell03"><a href="#">Menu 3</a></li>
     </ul>

Я пытаюсь получить эффект, похожий на использование таблицы и вертикальное центрирование каждой строки в ее ячейке. Можно ли воссоздать то же самое в уль?

спасибо заранее Giles

Answer 1

Прежде всего, если я правильно прочитал, что Меню 2.1 является подменю, очиститель мог бы выглядеть так:

<ul class="menu">
    <li class="active">Menu 1</li>
    <li>Menu 2
        <ul>
            <li><a href="#">Menu2.1</a></li>
            <li><a href="#">Menu2.2</a></li>
            <li><a href="#">Menu2.3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
</ul>

Вертикальное выравнивание, как правило, трудно сделать в CSS вне таблиц, но взгляните на:http://www.student.oulu.fi/~laurirai/www/css/middle/

Answer 2

Я склонен согласиться с ответом Nux, подменю должны быть вложенными списками. Что касается вашего вопроса о вертикальном центрировании: если вы хотите, чтобы вещи выглядели как таблицы визуально, вы можете просто использовать display: table;:

<style>
  ul { list-style-type: none; padding: 0; display: table; }
  li { display: table-cell; vertical-align: middle; }
</style>

Answer 3

вы можете добавить немного стиля, как

li
{
   white-space:pre-wrap;
   width://set width here
   text-align:center;
   vertical-align:middle;
}