Vertical-align text in css (with example)
The property vertical-align in css can emulate the align=”middle” in table. But if you think you just need to put the property and your text will follow you are at the beginning of a nightmare.
Vertical-align doesn’t really work the same way than the table equivalent, and to be honest I am still confused about it.
I would say in most case when you want to align middle some text it’s because you have an image on the same line and you want them aligned together. So lets have a look at some practical example: a menu with icons.
<li><a href="#"><img src="image1.jpg" alt="image1" />Home</a></li>
<li><a href="#"><img src="image1.jpg" alt="image1" />Contact</a></li>
<li><a href="#"><img src="image1.jpg" alt="image1" />Location</a></li>
</ul>
and a little bit of styling
{
display:inline;
padding:5px;
}
With this code the image will be aligned with the bottom of the text. To get the text align with the centre of the image we just need to add this:
{
vertical-align:middle
}
And magically the text will move to the centre of the pictures.


