Showing content from https://www.w3resource.com/html-css-exercise/css-properties/vertical-align-property-answer.php below:
Website Navigation
CSS Properties Answer: Vertical align property of an element
CSS Properties: How to set vertical align property of an elementLast update on March 01 2024 13:09:48 (UTC/GMT +8 hours)
Go to Exercise page
Solution:
HTML Code :
How to set vertical align property of an element
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
Go to Exercise page
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo
| Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4