text centre in <ul>

Question

Hi All,

I'm building a navigation bar inside a ul. Most of the menu items have long titles so I really need to wrap them over a number of lines, as in the following code (I've inserted br/ where I'd like the returns)

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

I'm trying to get the effect similar to using a table and vertically centring each row in it's cell. Is it possible to recreate the same in a ul?

thanks in advance Giles

Answer 1

u can add some styling like

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

Answer 2

First of all if I read correctly that Menu 2.1 is a submenu then a cleaner could would be:

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

Vertical alignment is generally hard to do in CSS outside tables, but have a look at: http://www.student.oulu.fi/~laurirai/www/css/middle/

Answer 3

I tend to agree with Nux's answer, submenu's should be nested lists. As to your question about vertical centering: if you want things to behave like tables visually, you can simply use display: table;:

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