Vertical centering method of Div picture

The vertical centering method of the Div image is purely a record, which is convenient for future use. The code is as follows:

CSS Language :
< style >
.box {
        /*Vertical Centering Method for Identifying Non IE Mainstream Browsers*/
        display : table-cell ;
        vertical-align : middle ;

        /*Set Horizontal Center*/
        text-align : center ;

        /*Hack for IE*/
        * display : block ;
        * font-size : 175px ; /*About 0.873200 * 0.873 about 175*/
        * font-family : Arial ; /*Prevent hack failure caused by non utf-8, such as gbk coding*/

        width : 200px ;
        height : 200px ;
        border : 1px solid #eee ;
}
.box img {
        /*Set the vertical center of the picture*/
        vertical-align : middle ;
}
</ style >

html:

HTML Language :
<div class= "box" ><a href= " http://www.howpm.com " target= "_blank" ><img src='/index/thumb.png' data-original= " http://www.google.com.hk/images/srpr/nav_logo27.png " /></a></div>
Appreciation

see CSS HTML Related articles for

Please specify that the original article of this website is reproduced from To be kicked , Link: https://itlu.net/articles/1481.html

Comment list (2)

  1. For example, the images in my blog's comment textarea are vertically and horizontally centered, but in IE6, it is invalid, ha ha.

    1. This is compatible with IE6. If it is not for compatibility, it will not be so troublesome

Add a comment

Hello! #Please fill in the information# determine

Reward the blogger for drinking water
 LOADING