Does the CSS "vertical-align" Property Apply to HTML "img" Element?

The vertical-align property in CSS is commonly used to specify the vertical alignment of inline or inline-block elements, including images. Therefore, the vertical-align property can be used to vertically align the HTML <img> element.

By default, images are aligned to the baseline of the text that surrounds them. However, you can use the vertical-align property to adjust their vertical alignment, as demonstrated in the following examples:

Example Image of Plumeria vertical-align: middle
Example Image of Plumeria vertical-align: bottom

These examples show two different values, "middle" and "bottom", applied to an <img> element to specify its vertical alignment relative to the parent element, affecting the text that surrounds it.

Please note that the vertical-align property only affects inline or inline-block elements, so it might not have any visible effect if the image is displayed as a block-level element.

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.