-webkit-font-smoothing: antialiased;
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts
Thursday, January 09, 2014
Tuesday, March 22, 2011
Centering (horizontally and vertically) an image in a div box
<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
<div class="wraptocenter"><span></span><img src="..." alt="..."></div>
http://www.brunildo.org/test/img_center.html
.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
<div class="wraptocenter"><span></span><img src="..." alt="..."></div>
http://www.brunildo.org/test/img_center.html
Subscribe to:
Posts (Atom)