Vertical center an image

Question

I'm trying to use the line-height, vertical-align method to center an image inside a div. Looking at examples, questions on here, and other fixes they all suggest and even show that this works. Yet it's not working for me.

Basic structure

<div class="photo_container">
    <img alt="" src="photos/1.jpg" class="thumbnail" />
</div>

CSS

div.photo_container
{
    width: 160px;
    height: 160px;
    padding: 10px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: White;
    box-shadow: 0px 0px 5px #AAA;
    text-align: center;
    line-height: 160px;
}
img.thumbnail
{
    vertical-align: middle;   
}

Basically, the container is always 160px high as you can see, but the image inside could be something like 100px high. In this case I want there to be 30px spacing at the top and the bottom of the container and for my image to be vertically aligned in the middle.

What am I missing?

ANSWERED

Turns out it was a DOCTYPE problem, I was using the

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

when I should have been using the HTML 5 doctype

<!DOCTYPE html>

Ah, in that case simply a matter of "almost standards mode" vs strict "standards mode". http://hsivonen.iki.fi/doctype/ Using the Strict XHTML doctype declaration would also have sufficed, but it's unlikely you truly have a reason to use XHTML over ordinary HTML, and HTML5 intermingles them much anyways. — reisio, May 10 '12 at 02:45

score 1 · Answer 1 · answered May 10 '12 at 02:34

1

Your code seems to work for me in chrome.. fiddle below. Is there something I'm missing?

Edit: I did add a width/height to the non-existant image.

JS Fiddle

answered May 10 '12 at 02:34

Jim Thomas

1,658
11
7

There's something *he*'s missing. :p – reisio May 10 '12 at 02:37
Thanks, but it a static width or height doesn't change it. – James Hay May 10 '12 at 02:41

score 1 · Accepted Answer · answered May 10 '12 at 02:36

1

A doctype declaration: <!doctype html>

(Or, alternatively: valid code)

answered May 10 '12 at 02:36

reisio

3,242
1
23
17

Yup that's it. No set height width required. – James Hay May 10 '12 at 02:38

score 0 · Answer 3 · answered May 10 '12 at 02:29

0

http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

This should explain how to do it.

answered May 10 '12 at 02:29

Dennis

338
3
12

If you looked through the whole article it doesn't just apply to background images, the concept works with divs too. Oh well can't win them all. – Dennis May 10 '12 at 02:41
I'll put you back to zero since this is a legitimate solution to the initial problem. I was however, looking for a way to get my current solution working properly. – James Hay May 10 '12 at 02:43
1

Appreciate it, I looked at it from the approach that sometimes we try to fix something that will never be quite right, so we need to look at it from a different angle. HTML and CSS can be such a beast in that it should work but just doesn't so we need to restructure. My bad – Dennis May 10 '12 at 02:44

Eran Medan · Answer 4 · 2012-05-10T02:42:37.503

0

This seems to work for me more or less

See in JSFiddle

CSS

div.photo_container
{
    width: 160px;
    height: 160px;
    padding: 10px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: White;
    box-shadow: 0px 0px 5px #AAA;
    text-align: center;
    line-height: 160px;
    border: 1px solid red;
}
img.thumbnail
{
    vertical-align: middle;   
}

HTML

<div class="photo_container">
    <img alt="" src="http://www.totalesl.com/images/icon/funny-icon.jpg" class="thumbnail" />
</div>

edited May 10 '12 at 02:42

answered May 10 '12 at 02:37

Eran Medan

44,555
61
184
276

But what about when the images he is trying to center are not 100px; he said they could be, but it sounds as if they are variable sizes, which means you need something flexible – Dennis May 10 '12 at 02:38
@user1357437 the width doesn't matter, I wanted to shrink the SO logo, updated the answer with a smaller image, it still works – Eran Medan May 10 '12 at 02:41
I saw the added width: 100px and my brain tied it to where he said the height is sometimes 100px. – Dennis May 10 '12 at 02:42
@user1357437 yep the brain has mysterious ways tricking us :) – Eran Medan May 10 '12 at 02:43

Vertical center an image

4 Answers4