w3resource

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

Go to Exercise page

Solution:

HTML Code :




How to set vertical align property of an element




w3resource Tutorial


An imagew3resource logo with default alignment : w3resource web development tutorial


An imagew3resource logo   with text-top alignment : w3resource web development tutorial


An imagew3resource logo with text-middle alignment : w3resource web development tutorial


An imagew3resource logo 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

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
YesYesYesYesYes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://w3resource.com/html-css-exercise/css-properties/vertical-align-property-answer.php