Himas Rafeek
Posted on: 1 year ago
CSS

Center an image vertically and horizontally in a container

Thanks to Brunildo.org for this: http://www.brunildo.org/test/img_center.html


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