Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use pure CSS to achieve the horizontal and vertical center of the picture in the DIV", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn about "how to use pure CSS to achieve the horizontal and vertical center of the picture in the DIV" this article.

HTML Code:

CSS Code:

/ * For Firefox Chrome*/

.demo {border:1px # ddd solid;width:208px;height:148px;overflow:hidden;text-align:center;display:table;float:left;margin:50px;position:relative;}

.demo a {display:table-cell;vertical-align:middle;width:200px;height:140px;}

.demo an img {border:1px # ddd solid;margin:0 auto;max-width:200px;max-height:140px;}

/ * For IE7*/

* + html .demo a {position:absolute;top:50%;width:100%;text-align:center;height:auto;}

* + html .demo an img {position:relative;top:-50%;left:-50%;}

/ * For IE6*/

* html .demo a {position:absolute;top:51%;width:100%;text-align:center;height:auto;display:block;}

* html .demo an img {position:relative;top:-50%;left:-50%;width:_expression (this.width > 200? "200px": "auto"); height:_expression (this.height > 140? "140px": "auto");}

The css in For IE6 has the following paragraph:

Width:_expression (this.width > 200? "200px": "auto"); height:_expression (this.height > 140," 140px ":" auto ")

This limits the maximum width and height of images in IE6, just like those in non-IE6:

Max-width:200px;max-height:140px

It's the same thing.

The above is all the contents of this article entitled "how to use pure CSS to center pictures horizontally and vertically in DIV". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.