CSS vertical align

Question

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/

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: http://phrogz.net/css/vertical-align/ — scragz, Jan 24 '11 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 `` either. Ha. — Jason, Jan 24 '11 at 19:09
Does this answer your question? [How do I vertically align text in a div?](https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div) — , Apr 26 '20 at 03:17

score 18 · Accepted Answer · answered Jan 24 '11 at 18:56

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.

score 13 · Answer 2 · answered Jan 24 '11 at 19:06

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:

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.
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).
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.

score 5 · Answer 3 · answered Mar 08 '13 at 22:38

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>

answered Mar 08 '13 at 22:38

Justin

26,443
16
111
128

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 Jan 10 '14 at 22:09
is there a way to do this while having .centered be a percent width (that might actually be 100%). – Kevin Wheeler Jul 17 '15 at 05:31

score 5 · Answer 4 · answered Feb 05 '15 at 22:50

5

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

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

answered Feb 05 '15 at 22:50

rainy

1,577
1
19
27

score 3 · Answer 5 · answered Jan 24 '11 at 18:53

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>

answered Jan 24 '11 at 18:53

Jason

3,357
1
22
29

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 Jan 24 '11 at 18:56
@anonymous: are you able to use JavaScript, or any JS libraries (MooTools, Scriptaculous, jQuery, Glow...)? – David Thomas Jan 24 '11 at 18:59

score 2 · Answer 6 · answered Sep 08 '13 at 22:45

2

Pretty cool and modern approach (with height specified):

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

answered Sep 08 '13 at 22:45

Agat

4,577
2
34
62

score 2 · Answer 7 · answered Nov 03 '14 at 10:13

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

answered Nov 03 '14 at 10:13

Ruwen

3,008
1
19
16

score 1 · Answer 8 · answered Jan 24 '11 at 19:12

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'});

});

answered Jan 24 '11 at 19:12

heymrcarter

678
1
7
20

So he needs to include the full jQuery library, plus this script? Seems a little overkill just to center something. – Jason Jan 24 '11 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 – heymrcarter Jan 24 '11 at 19:30

score 1 · Answer 9 · edited Oct 17 '18 at 02:14

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.

edited Oct 17 '18 at 02:14

Rob

26,989
16
82
98

answered Oct 17 '18 at 01:58

Webguru

11
3

CSS vertical align

9 Answers9

Linked