CSS Properties: How to set vertical align property of an element

Go to Exercise page

Solution:

HTML Code :

w3resource Tutorial

An image with default alignment : w3resource web development tutorial

An image   with text-top alignment : w3resource web development tutorial

An image with text-middle alignment : w3resource web development tutorial

An image with text-bottom alignment : w3resource web development tutorial

Explanation:

• This HTML document demonstrates the use of the vertical-align property to control the vertical alignment of images relative to surrounding text.
• CSS rules are defined for images with classes top, middle, and bottom to set different vertical alignments.
• vertical-align: text-top; aligns the top of the image with the top of the surrounding text.
• vertical-align: middle; vertically aligns the image to the middle of the line.
• vertical-align: text-bottom; aligns the bottom of the image with the bottom of the surrounding text.
• Images with different vertical alignments are displayed within paragraphs to illustrate the effect.

Live Demo :

See the Pen vertical-align-property-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser

Yes	Yes	Yes	Yes	Yes

Go to Exercise page