CSS vertical align [duplicate] - html

Question

This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 2 years ago.
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/

Answer 1

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.

Answer 2

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.

Answer 3

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>

Answer 4

Use the translate property, it's simple and works even in IE:
img {
position: relative;
top: 50%;
transform: translateY(-50%);
}

Answer 5

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>

Answer 6

Pretty cool and modern approach (with height specified):
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

Answer 7

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

Answer 8

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

Answer 9

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.