Advanced Search

Return to Snippet

Revision: 58345
at July 17, 2012 06:04 by adambundy
Updated Code 
The markup:

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

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]-->

Revision: 58344
at July 10, 2012 03:18 by adambundy
Updated Code 
The markup:

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

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]-->
And that�s the relevant HTML

Revision: 58343
at July 9, 2012 23:11 by adambundy
Initial Code 
The markup:

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

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]-->
And that’s the relevant HTML
Initial URL 
http://www.brunildo.org/test/img_center.html
Initial Description 
Thanks to Brunildo.org for this: http://www.brunildo.org/test/img_center.html
Initial Title 
Center an image vertically and horizontally in a container
Initial Tags 
css
Initial Language 
CSS