Vertical Align Middle an image in an a tag in a div
12,663
Normally, img is an inline-element, which means, that it's being aligned to the baseline of the text of your parent-element. This leaves a nasty space underneath your image.
You can prevent this with
img{
display:[inline-]block; /* or inline-block if the img isn't the only element in your div*/
}
This removes the reserved space underneath the image.
you can change the alignment by
img{
vertical-align: [top|middle|bottom|baseline|...] ;
}
to align it according to your text.
In general, you can only vertical-align inline elements. So an image with display:block
won't be affected by a vertical alignment declaration.
Author by
David
Updated on June 04, 2022Comments
-
David almost 2 years
This has probably been done before but I can't find a solution for my specific case. I have the following:
<div class="holder" style="height:260px;width:260px;"> <a href="#"><img src="image.jpg" /></a> </div>
How can I get the image to align into the middle of the div?