Reputation: 29925
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
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
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
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