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.