Css Image vertical center (compatible with mainstream browsers, including IE6/IE7)

1. Use table-cell to center, font-size for compatibility with IE6 +/FF/Chrome
Advantage: no additional tags are added and compatible with mainstream browsers.

The code is as follows:

Copy code

<! -- Html structure --> <Div class = "box-1"> <A class = "img-wrap-1" href = "#"> </A> </Div> /* Style */ . Box-1 {display: table ;} . The img-wrap-1 {display: table-cell; width: 200px; height: 200px; border: 1px solid # ccc; text-align: center; * font-size: 178px; zoom: 1; vertical-align: middle ;} /* The ratio of height to font-size is approximately: 1: 0.893; zoom: 1 is used to trigger hasLayout of IE */

2. Use line-height to implement center compatibility with IE7 +/FF/Chrome
Advantage: no hack is required and compatible with mainstream Internet Explorer 7 and Internet Explorer 7
Disadvantage: This method is not compatible with IE6. Of course, you can use the font-size in method 1 to be compatible with IE6.

The code is as follows:	Copy code
<! -- Html structure --> <Div class = "box-2"> <A class = "img-wrap-2" href = "#"> </A> </Div> /* Style */ . Img-wrap-2 {display: inline-block; width: 200px; height: 200px; line-height: 200px; border: 1px solid # ccc; text-align: center ;} . Img-wrap-2 img {vertical-align: middle ;}

3. Use the button tag to implement Center-compatible IE6 +/FF/Chrome
Advantage: no hack is required and compatible with mainstream Internet Explorer 6 and Internet Explorer 6
Disadvantage: extra tag buttons are added.

 

The code is as follows:

Copy code

<! -- Html structure --> <Div class = "box-3"> <A class = "img-wrap-3" href = "http://www.111cn.net/" target = "_ blank"> <Button disabled = "disabled"> </button> </A> </Div> /* Style */ . Box-3 {display: inline-block; width: 200px; height: 200px; border: 1px solid # ccc; text-align: center ;} . Img-wrap-3 button {width: 100%; height: 100%; border: 0; background: none ;} . Img-wrap-3 img {cursor: pointer ;}

4. Use 1px small images to achieve vertical center compatibility with IE6 +/FF/Chrome
Advantage: no hack is required and compatible with mainstream Internet Explorer 6 and Internet Explorer 6
Disadvantage: added the redundant label img.

 

The code is as follows:	Copy code
<! -- Html structure --> <Div class = "box-4"> <A class = "img-wrap-4" href = "#" target = "_ blank"> </A> </Div> /* Style */ . Box-4 {display: inline-block; width: 200px; height: 200px; border: 1px solid # ccc; text-align: center ;} . Blank {width: 0px; height: 100%; vertical-align: middle ;}

Of course, the vertical center method has more than one of the above methods, but currently it is more common, and the compatibility is better, if you find a better method to supplement later