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:

vertical-align: middle

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.