vertical align image within parent
i just need a way to make an image align vertically within it's parent element (in this 开发者_如何学Pythoncase, an <li>
, but would be nice if solution worked for <div>
as well). i have tried everything and can't get anything to work...
basically, i want to align it vertically. also, i do not know the height of the parent element ahead of time.
Try this:
<div class="wraptocenter"><span></span><img src="..." alt="..."></div>
And the CSS:
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
Credit: http://www.brunildo.org/test/img_center.html
精彩评论