Question

I need to align multiple lines of text to the middle. Here is a rough guide of the markup I am working with.

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

So as you can see from my image, the “work” link should be centered vertically. I have the width and height set with vertical-align: middle;. I know you need to set the line height for it to actually work but theres the problem. If I set the line height to 72px (the height of the element) then some of the links will stretch down the page due to them taking up two lines.

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

Answer 1

write like this

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

& you can give display:table-cell; to it like this

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

but it’s not work in IE7 & below