Thomas Clayson
Thomas Clayson

Reputation: 29925

Vertical align li elements in navigation

I have links in a vertical ul

Some of them are small (eg: Home) and are only on one line. However some are on two lines (eg: Register With Us - wraps onto the next line).

Is there any way to get all this text to vertically align in the ul?

My UL has a fixed height of 75px, as do the li's inside (which are float:left to make it vertical).

The a's inside the li's are display: block and have a height and width too.

Any help would be brilliant thank you, I can't find out how to do this anywhere.

Thanks

Upvotes: 2

Views: 7905

Answers (3)

omabena
omabena

Reputation: 3581

this might give you a extra ideas of how can you vertical align things depending of your situation, http://blog.themeforest.net/tutorials/vertical-centering-with-css/ And it metions the goods and bads for each approach.

GL

Upvotes: 0

clairesuzy
clairesuzy

Reputation: 27624

My guess is that you have li's floated at the minute, changing the lists to use display:inline-block; instead of float should enable you to get the vertical alignment..

This may not be a straight swap, it might need a tweak or two to look the same as what you have, however seeing your code would help us help you ;)

sorry, my mistake it's actually display: table-cell; which is the answer for modern browsers however this does not work in IE7 and below..

I was sure I'd done this using inline-blocks for IE but I can't find it in my archives.. am now going out, so for now will leave you with Chris Coyiers write up which lists a few different IE hacks at the bottom if you require IE7 support : Vertically Center Multi-Lined Text

Upvotes: 3

Adrien Rey-Jarthon
Adrien Rey-Jarthon

Reputation: 1154

There are more hack than solutions for this, and i don't know any working on all browser. If you're using css3, you can use the flexible box layout: http://blog.isotoma.com/2010/08/css3-flexbox/ If no, you can use the 'table' hack : http://www.456bereastreet.com/archive/201103/flexible_height_vertical_centering_with_css_beyond_ie7/

Upvotes: 0

Related Questions