CSS has a property called vertical align. It can be a bit confusing when you first learn about it, so I thought we could go through its use a little bit. The basic usage is like this:
img {
vertical-align: middle;
}
Notice in this usage case, it is being applied to the img element. Images are naturally inline elements, meaning they sit right inline with text if they are able to. But what does “sit inline” mean exactly? That is where vertical-align comes in.
The valid values are: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, or a value in percentage.
The confusion, sets in when people try to use vertical-align on block level elements and get no results. If you have a small div inside a larger div and want to vertically center the smaller one within, vertical-align will not help you.
Baseline
The default value of vertical-align (if you declare nothing), is baseline. Images will line up with the text at the baseline of the text. Note that descenders on letters dip below the baseline. Images don’t line up with the lowest point of the descenders, that isn’t the baseline.
Top & Bottom
Top and Bottom work similarly to text-top and text-bottom, but they are not constrained by text but rather by anything at all on that line (like another image). So if there were two images on the same line, of different heights and both larger than the text on that line, their tops (or bottoms) would align regardless of that text size.
vertical-align and inline-block
Images, while technically inline level elements, behave more like inline-block elements. You can set their width and height and they obey that, unlike most inline elements.
Inline-block elements behave just like images with vertical align, so refer to the above. However, be aware that not all browsers treat inline-block elements the same way, so vertical-align may be the least of your worries. That’s another story though….
Deprecated as an attribute
Occasionally you will see “valign” used on table cells to accomplish vertical alignment. It should be noted that this attribute is deprecated and should not be used. There really isn’t any reason for it anyway as you can do it with CSS anyway.
More Information
vertical-align – MDN
Verical-Align: All you need to know
Centering things in unknown height parents
-By
Uma Maheswar
Helical It Solution
Best Open Source Business Intelligence Software Helical Insight is Here
