simple css question regarding text align

I'm making a menu. Looks something like thing:

<div>
    <ul>
        <li><a>menu/<br/>item</a></li>
    </ul>
</div>

I want to center the text vertically. I usually go with

ul li { height: 50px; line-height: 50px; }

for example. But obviously this does not work since it is a

tag in the menu. I need the text to look like

menu/
item

in the menu. Any ideas how to solve this? Tha开发者_如何学Gonks!

You could just set a smaller line height and equal padding top and bottom, like so:

ul li {
   padding: 20px 0;
   line-height: 14px;
}

This method assumes each item list contains two lines of text for them all to be equal height.

It would look something like this - http://jsfiddle.net/ajcw/fVamh/

Vertical Align is only supported in table cells. You can either adjust your padding to move the text around (will only work for your particular font size and if that changes you will have to re-adjust your padding), or as Dan Andrews mentioned above, you can use display: table-cell, however, this is only supported by the newer browsers, so depending on your audience, it may not be a viable solution.

For table-cell support, see QuirksMode.com