Question

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?

Answer 1

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.