vertical align image within parent

Question

i just need a way to make an image align vertically within it's parent element (in this case, 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.

Answer 1

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%5Fcenter.html