Andy Andy - 1 month ago 7
CSS Question

Centre image in a DIV

There are numerous discussionsn on SO but I've tried suggestions without success. I have a DIV within which I need an image, whose height and width are unknown, to be centered horizontally and vertically.

I also need this multiple times so I don't want to have to add more CSS code each time.

Here's what I have in terms of CSS and HTML for the DIV.

.gallery_image_container {
position: relative;
width: 830px;
height: 500px;
z-index: 7;
border: solid 4px #EAEAEA;
background-image:url(bottom_back.png);
}


and

<div class="gallery_image_container">
<img src="image.png" />
</div>

Answer

To give credit, I reviewed this very helpful article: http://phrogz.net/css/vertical-align/index.html

You need to add 3 more CSS rules to .gallery_image_container:

text-align: center;
display: table-cell;
vertical-align: middle;

The first line is pretty obvious; it gets you centered horizontally. The second line gets your div to behave in a table cell-like manner, and the third makes the vertical alignment happen. I'd post a jsfiddle to demonstrate but they are doing some maintenance stuff today. I did test it and it worked in current Chrome and FF and IE 8.

Comments