0

I've seen multiple questions about a pretty simple task: how to vertically align an image in a div.

My code (http://jsfiddle.net/3cYtX/1/) is pretty simple:

.container {
    width:200px;
    height:200px;
    background-color: green;    
}
img.middle {    
    vertical-align:middle;
}
<div class="container">
    <img class="middle" src="test.gif" width="80" height="40" />
</div>

My code does not align the image. How to fix it?

serhio
  • 28,010
  • 62
  • 221
  • 374
  • 1
    **I've seen, but didn't find an answer!** – serhio Jun 03 '14 at 08:18
  • I can't believe that all of these answers didn't work for you http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div – Matthew Lock Jun 03 '14 at 08:21
  • @MatthewLock: as you can see, the accepted answer is different that in the solution you pointed out... – serhio Jun 03 '14 at 08:47
  • No it's on that page, look http://stackoverflow.com/a/7337378/74585 you should have just tried that and voted that answer up instead – Matthew Lock Jun 04 '14 at 00:05

4 Answers4

3

You can make the div behave like a table cell:

Demo: http://jsfiddle.net/abhitalks/3cYtX/5/

.container {
    display: table-cell; /* make it behave like a table cell */
    vertical-align: middle; /* make it align contents vertically */
    text-align: center; /* make it align contents horizontally */
}

Note: As James pointed out in the comments, elements set to table-cell should ideally be content of elements with display table or table-row. e.g. http://jsfiddle.net/abhitalks/3cYtX/8/

Abhitalks
  • 27,721
  • 5
  • 58
  • 81
  • tahnks, no need to align horizontally :) – serhio Jun 03 '14 at 08:19
  • 1
    Elements set to display as `table-cell` should ideally always be wrapped in an element set to display as `table`. The reason I used `line-height` in my answer was because with this as it currently stands you'll run into issues if you ever need to use percentage widths instead of fixed widths. Here is a demo showing what happens when you give the `.container` element 100% width: http://jsfiddle.net/3cYtX/6/. – James Donnelly Jun 03 '14 at 08:28
  • 1
    Thanks a lot for pointing that out @James. Adding that bit to the answer. – Abhitalks Jun 03 '14 at 08:30
1

img elements are inline content. This means you can simply give your .container element a line-height equal to the height and central text alignment:

.container {
    ...

    line-height: 200px;    /* Because height is 200px. */
    text-align: center;  
}

JSFiddle demo.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • `line-height` also doesn't work too well with images. See this: http://jsfiddle.net/abhitalks/3cYtX/9/ . – Abhitalks Jun 03 '14 at 08:40
  • @abhitalks that's because you've removed the `vertical-align` from the `img` element (which features in OP's question). http://jsfiddle.net/3cYtX/10/ – James Donnelly Jun 03 '14 at 08:49
  • that was the fiddle from your answer: http://jsfiddle.net/3cYtX/3/. you may want to update that link. – Abhitalks Jun 03 '14 at 08:52
0
.container{
     vertical-align:  middle;
     text-align:      center;
     line-height:     200px;
}
Dwza
  • 6,494
  • 6
  • 41
  • 73
Kisspa
  • 584
  • 4
  • 11
0

It only vertically aligns if it is a table cell: Mozilla Developer Network

.container {
    display: table-cell;
    vertical-align: middle;
}

There are other ways to do it: Link

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Sorry had */ 
  -ms-transform: translateY(-50%);     /* to add these, then */
  transform: translateY(-50%);         /* it should center perfectly */                  
}

Fiddle

Also, this was mentioned to be important: "As a few people have pointed out, this method can cause elements to be blurry due to the element being placed on a “half pixel”. A solution for this is to set its parent element to preserve-3d. Like following:"

.parent-element {
  -webkit-transform-style: preserve-3d;
}
geoyws
  • 3,326
  • 3
  • 35
  • 47