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.
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.
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;
}
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.
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>
Use the translate property, it's simple and works even in IE:
img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
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>
Pretty cool and modern approach (with height specified):
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
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
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'});
});
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.
vertical-align
was actually used for: phrogz.net/css/vertical-aligndisplay:table-cell
. Of course, I wouldn't use my proposed answer of<table>
either. Ha.