HomeTextStandard ColorsCustom Colorsvertical-align
 

vertical-align Style

 
Presentation

vertical-align is used to vertically position inline elements (text, span, img, etc) inside their block container (div, p, table cell, etc).

This format is not inherited.

The effects of vertical-align style are easier demonstrated than explained. Discover vertical positionning rules by trying different ways to modify container height on samples below.

Tag to be formatted depending on type of container tag

A Block container other than table :

DIV
inline element

B Table container :

TABLE
TR
TD
inline element
TABLE
TR
TD
inline element
Samples legend
<img> tags large image small image, baseline, middle, bottom, ...
<span> tags qfQF
vertical-align formatted
cells and <span> tags
 Green  background
Avertical-align format applied to inline elements

Supported values (all) : baseline, top, middle, bottom, text-top, text-bottom, super, sub.

Following samples use div containers (red border).

Applied to <img> tags :

qfQF baseline.png top.png middle.png bottom.png text-top.png text-bottom.png super.png sub.png

Applied to <span> tags :

qfQF baseline top middle bottom text-top text-bottom super sub

Remark : vertical-align formatted <span> tags below have a fixed font size.
This is the reason why their size is not affected when <div> container font size changes.

Bvertical-align format applied to table cells

Supported values (subset) : baseline, top, middle, bottom.

baseline is supposed to be the default. As you can see, it is not.

In following table samples, cells having an orange background are vertical-align formatted. Their vertical-align format is stated on left column.

First row cells are not vertical-align formatted to show default positionning.

(default) qfQF small image qfQFsmall image qfQF
baseline qfQF small image qfQFsmall image qfQF
top qfQF small image qfQFsmall image qfQF
middle qfQF small image qfQFsmall image qfQF
bottom qfQF small image qfQFsmall image qfQF
(default) large image large imageqfQF large imagesmall image qfQF
baseline large image large imageqfQF large imagesmall image qfQF
top large image large imageqfQF large imagesmall image qfQF
middle large image large imageqfQF large imagesmall image qfQF
bottom large image large imageqfQF large imagesmall image qfQF
Go to toptop