Vertical Align Property in CSS
The CSS property 'vertical-align' has given many web designers trouble. The W3C Standard definition for vertical-align says, "This property affects the vertical positioning inside the line boxes generated by an inline-level element." The first aspect of this definition that you must absorb immediately is that this property affects inline elements, and table cells. So don't try using it for aligning entire divs or ps or other block-level elements. The second important point is that the positioning is done within the line box that the inline element has generated. The CSS 'vertical-align' property does not work the same as the 'align' attribute from HTML4! Everything is aligned to the line box, and not to the containing block-level element as you might expect. And so it's vital that you set the 'line-height' property of the parent block-level element to a value high enough to accommodate any inline elements that you want to control with 'vertical-align'. It's aligning inline elements that give most people trouble, so that's what we'll learn about here.
CSS Vertical Align an Image
Let's begin with setting vertical align on an image in a div. The images in the box below have their 'vertical-align' property set to baseline, top, bottom, and middle, respectively. The text is there to provide a visual reference for the four different alignment settings. This example illustrates how the baseline of the text, as determined by the 'line-height' setting, is the vertical reference for the alignment of the images set to "vertical-align:baseline" and "vertical-align:middle" (ie. the first and last images). And it's the vertical boundary of the line box that is used to position the second and third images, which are set to 'top' and 'bottom'.
Some Text
Click here to see the HTML and CSS code
If you click on the link above to see the HTML and CSS, you'll see that it's all pretty simple. The .box div is just a convenient container. Inside that is a p with it's CSS set to an approriate 'font-size' and the 'line-height' is set to a little more than twice the size of the square images to make room for the various settings used. Inside the p are four img tags with their CSS vertical-align property set individually to demonstrate the available values.
CSS Vertical Align Text
Of course, you can also use 'vertical-align' on text to adjust it's position within a line box by enclosing it in an element to which you can apply the desired CSS rule like span or b. Such as:
The quick brown fox jumps over the lazy dog.
Click here to see the HTML and CSS code
In the example above, the word "jumps" is set to 'vertical-align:sub' for subscript, and the word "over" is set to 'vertical-align:super' for superscript, but I could have used any value for 'vertical-align' from "text-top" to a specific length, like 'vertical-align:8px'.
Summary
In using 'vertical-align', you have to remember that you can't use it on everything, just inline elements like text, img, input, and button that would ordinarily be aligned to the baseline, tds, and 'table-cell' elements. You also have to keep in mind the two essential rules:
- Set the line-height of the parent, containing block-level element to accomodate the inline elements you want to align.
- Set the desired 'vertical-align' value for the inline element itself.
This page was last modified on October 01, 2020
