Vertical-align middle with display table-cell not working on images

Question

I'm trying to use the vertical-align: middle on a layout to vertically center sometimes text, sometimes images, but it's only working on text. Can anyone tell me why?

HTML:

<div>
    <img src="http://jsfiddle.net/img/logo.png"/>
</div>

<div>
    <span> text </span>
</div>

CSS:

div{
    width:200px;
    height:200px;
    background-color:red;
    display:table;

    margin:10px;
}
img, span{
    display:table-cell;
    vertical-align:middle;
}

http://jsfiddle.net/9uD8M/ I created a fiddle aswell

Why do you need `display:table-cell`? – greenish Dec 14 '13 at 15:06 — greenish, Dec 14 '13 at 15:06

score 24 · Accepted Answer · answered Dec 14 '13 at 15:50

24

Put border: 1px solid black on your img, span tags, then inspect both elements in the browser dev. console. You'll notice that the span defaults to 100% height of its parent, while the image has a defined height (the height of the actual image).

So you're not really vertically aligning those elements relative to the div, you're just vertically aligning the text inside the span element relative to the span :)

If you really want to use tables for vertical-centering, here's the correct code: http://jsfiddle.net/WXLsY/

(vertical-align and display:table-cell go on the parent, and you need wrapper table on them)

But there are other ways to do this (SO has many answers to this question, just use search)

answered Dec 14 '13 at 15:50

nice ass

16,471
7
50
89

In your example, the `vertical-align: middle` property is not needed for the `img` and `span` child elements. The rest of the CSS is sufficient, and the explanation is good. – Marc Audet Dec 14 '13 at 15:52
I see, well tables are not needed per se, but I was using them succesfully with the text. My image is responsive so I don't know the width or height to be able to center via position:absolute for example – Elaine Marley Dec 14 '13 at 15:59
1

@Elaine: try [this solution](http://stackoverflow.com/a/13075912/1058140). I have it in my favorites and use it every time I want to vertically align an element with variable height – nice ass Dec 14 '13 at 16:00
@onetrickpony : How I can vertically center the div itself instead of it's contents *(when it's height is set by it's contents and not manually)*? – user2284570 Oct 20 '14 at 01:29
@user2284570 see http://css-tricks.com/centering-in-the-unknown or the link to the answer I posted above – nice ass Oct 24 '14 at 12:12

score 4 · Answer 2 · answered Dec 14 '13 at 15:50

Here is one way of fixing the problem:

HTML:

<div>
    <span><img src="http://jsfiddle.net/img/logo.png" /></span>
</div>
<div> 
    <span> text </span>
</div>

Put your img in a span, the image is a replaced element, it cannot contain children content, hence, vertical-align will not work.

CSS:

div {
    width:200px;
    height:200px;
    background-color:red;
    display:table;
    margin:10px;
}
span {
    display:table-cell;
    vertical-align:middle;
}

See demo at: http://jsfiddle.net/audetwebdesign/Fz6Nj/

There are several ways of doing this, you could also apply display: table-cell to the parent div element, but that would be a different approach.

score 0 · Answer 3 · answered Jan 16 '17 at 08:44

In order to vertically align an image inside a table cell you need to give the image a display of block.

display: block
margin: 0 auto

the margin: 0 auto is to align the image to the center. If you want the image left aligned then don't include this. If you want the image right aligned you can add:

float: right

Thanks, G

score -3 · Answer 4 · answered Dec 14 '13 at 15:56

-3

You can try by adding -> line-height: 200px; in the span style section, I think it might work;

answered Dec 14 '13 at 15:56

dpuertas

23
4

Vertical-align middle with display table-cell not working on images

4 Answers4

Linked