vertical-align | Loop and Break

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell element.

Values

vertical-align: baseline /* keyword values */
vertical-align: sub
vertical-align: super
vertical-align: text-top
vertical-align: text-bottom
vertical-align: middle
vertical-align: top
vertical-align: bottom
vertical-align: 10em /* values */
vertical-align: 4px
vertical-align: 20% /* values */

vertical-align: inherit

<!DOCTYPE html>
<html>
    <head>
        <style>
            img.top {
                vertical-align: text-top;
            }
            
            img.bottom {
                vertical-align: text-bottom;
            }
        </style>
    </head>
    <body>
        <p>
            An <img src="image.png" width="270" 
            height="50" />
			image with a default alignment.
        </p>
        <p>
            An <img class="top" src="image.png" 
            width="270" height="50" />
			image with a text-top alignment.
        </p>
        <p>
            An <img class="bottom" src="image.png" 
            width="270" height="50" />
			image with a text-bottom alignment.
        </p>
    </body>
</html>

Categories

Values