13

I have a img in floated div and I don't know how to center it vertically.

<div style="height: 300px">
   <img style="height: 50px" src="something" />
</div>

vertical-align: middle of course doesn't work.

http://jsfiddle.net/wKQYj/

4
  • 1
    The two ways this article mentions have been given already as separate answers but you would be a better CSSer if you knew the what vertical-align was actually used for: phrogz.net/css/vertical-align
    – scragz
    Commented Jan 24, 2011 at 19:00
  • @scragz - That is a good link. Though, I wouldn't use display:table-cell. Of course, I wouldn't use my proposed answer of <table> either. Ha.
    – Jason
    Commented Jan 24, 2011 at 19:09
  • pbs.twimg.com/media/B2mW8NiCQAA6IIP.jpg
    – walv
    Commented Nov 18, 2014 at 14:10
  • 5
    Does this answer your question? How do I vertically align text in a div?
    – user13117614
    Commented Apr 26, 2020 at 3:17

9 Answers 9

18

To vertically-align text within a parent element, and bear in mind that an img is an inline-element and so behaves similarly to text, you can simply set the line-height to the height of the parent element:

div {
    height: 300px;
    line-height: 300px;
}

JS Fiddle demo.

13

The vertical-align CSS style specifies the alignment of text within its text row. This allows you to specify text as superscript or subscript, for example.

So it isn't actually intended to vertically align an element within a box.

There is an explicit exception to this, however -- table cells (ie <td> and <th> elements) use the vertical-align style to do exactly that: align the contents of the cell within the cell.

This exception is something of a quirk - it really shouldn't exist. The CSS designers put it in there in order to allow CSS to reproduce the valign attribute of table elements, which was commonly used by designers in the dark-old days of table-based layouts.

For other elements, aligning the contents of a box vertically in the middle of the it can be a bit of a fine art. There are several techniques:

  1. For single lines of text, simply make the line-height the same as the height of the entire box. You probably won't even need vertical-align for this.

  2. Use display:table-cell; to make the element simulate a table cell, and then use vertical-align. This works, but may have unintended consequences (there are other attributes of table cells that you may not want to simulate).

  3. If you know the height of the element you want to vertically align, you can position it to 50% minus half its height, like this:

    position:absolute;
    top:50%;
    height:200px;
    margin-top:-100px; /* half the height */
    

There are a few others, but these should get you started.

Hope that helps.

5

For a more modern (IE8+) solution that doesn't use tables, I like this one best.

<style>
/* Can be any width and height */
.block {
  height:500px;
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can be any width or height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
</style>

<div class="block"><div class="centered">Centered Content</div></div>
2
  • 1
    Best solution indeed, since it does not need to know the height of the content and does not use table-cell css. Thanks for sharing!
    – Sygmoral
    Commented Jan 10, 2014 at 22:09
  • is there a way to do this while having .centered be a percent width (that might actually be 100%). Commented Jul 17, 2015 at 5:31
5

Use the translate property, it's simple and works even in IE:

img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
0
3

vertical-align property is only truly good on td elements. Try something like:

<table>
 <tr>
  <td style='height:300px; vertical-align:center'>
   <img src='something'>
  </td>
 </tr>
</table>

OR since you know the height and width of the img:

<div style='height:300px;'>
 <img style='height:50px; position:relative; top:50%; margin-top:-25px'>
</div>
2
  • 2
    ZOMG, none of the above seems ok to me, I mean there's serious hole in css, they're developing shadows etc and we have to use tables still or at divs in divs to center vertically... Holy cow. I have to use divs. And I can't use the second code because the div height will be changed by users. So I'm lost.
    – anonymous
    Commented Jan 24, 2011 at 18:56
  • @anonymous: are you able to use JavaScript, or any JS libraries (MooTools, Scriptaculous, jQuery, Glow...)? Commented Jan 24, 2011 at 18:59
2

Pretty cool and modern approach (with height specified):

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
2

I'm using the display:box property:

#container {
    display: box;
    box-orient: vertical;
    box-pack: center;  
}

#text {
    vertical-align: middle;
}

See the js-fiddle here: verical align js-fiddle

1

Javascript would probably be the best best to get the image centered in the vertical center for every case. if you can use a library like jQuery it's just a few lines of code.

$(function(){
    var containerHeight = $('#container').outerHeight();
    var imgHeight = $('#logo img').outerHeight();

    var difference = (containerHeight - imgHeight)/2;
    $('#logo img').css({'position' : 'relative', 'top' : difference + 'px'});

});

2
  • So he needs to include the full jQuery library, plus this script? Seems a little overkill just to center something.
    – Jason
    Commented Jan 24, 2011 at 19:15
  • if he has to center something more than a few times and if he doesn't know A) what the height of the parent div is, and B) what the height of the image is, this will work every time, and in every case Commented Jan 24, 2011 at 19:30
1

I'm using flex for centering an element. It is effective at making the page more responsive.

div {
    display: flex;
    align-items: center;
}

Please have a look here to learn how to center vertically.

Not the answer you're looking for? Browse other questions tagged or ask your own question.