Vertical alignment of several lines of text to the middle

Question

I need to align a few lines of text to the middle. Here is a rough guide to the markup I'm working with.

<ul> <li> <a href='#'>This should be centered.</a> <li> </ul> 

So, as you can see from my image, the link "work" should be centered vertically. My width and height are set using vertical-align: middle; . I know that you need to set the line height so that it really works, but there is a problem. If I set the line height to 72px (element height), then some of the links will stretch the page due to the fact that they occupy two lines.

Is there a way to align multiple lines of text to the middle without using line height?

Thanks.

Answer 1

write like this

 a{ display:inline-block; vertical-align:middle; } 

& you can give display:table-cell; like that

 li { vertical-align:middle; display:table-cell; } 

but it does not work in IE7 and below

Answer 2

Use display: table-cell; in element li.

 li { width:200px; height:200px; vertical-align:middle; display:table-cell; } 

This will give you this effect:

Answer 3

You can try changing the display to block the hyperlink and use pads:

li a {display: block; padding: 30px 10px 30px 10px}

Answer 4

I came up with this to handle vertical aligned 100% height / width of anchors inside containers:

http://jsfiddle.net/khaustic/KDfN6/ Markup:

 <div class="links one"> <a href="#">One</a> </div> <div class="links two"> <a href="#">Two Two</a> </div> 

CSS

 * { /*ie box model forever!*/ box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .links { height: 5.0em; text-align:center; outline: 1px solid #333; float:left; margin: 0 1.0em; overflow:hidden; } .links.one { width: 8em; } .links.two { width: 4em; } .links a { width:10em; text-align: center; display: table-cell; vertical-align:middle; height: inherit; }