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

This article mainly explains the "css to achieve the vertical center of any picture what are the methods", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "css to achieve the vertical center of any picture what are the methods?"

Method 1:

Set the display mode of the external container to display:table, the meaning of this setting is needless to say. A span tag is embedded on the outside of the img tag, and the display mode of the span is set to display:table-cell, so that the content inside the span is equivalent to a table, and you can easily use the vertical-align attribute to align the contents.

The code is as follows:

Method 1-Vertical centering of pictures of unknown height-www.cleanthem.com body {height:100%;} # box {width:500px;height:400px; display:table; text-align:center; border:1px solid # d3d3d3tritBackgroundWaff;} # box span {display:table-cell; vertical-align:middle;} # box img {border:1px solid # ccc;}

Demo address

Method 2:

The situation for standard browsers is the same as above, except for IE6/IE7 by inserting a pair of empty tags in front of the img tag.

The code is as follows:

Method 2-Pictures of unknown height are centered vertically-www.cleanthem.com body {height:100%;} # box {width:500px;height:400px; display:table-cell; text-align:center; vertical-align:middle; border:1px solid # d3d3d3tritBackgrounddispose;} # box img {border:1px solid # ccc;}

Demo address

Method 3:

Wrap a p tag around the img tag. Standard browsers use the pseudo-class attribute of the p tag: before to achieve centering. In addition, CSS expressions are used for IE6/IE7 to achieve compatibility.

The code is as follows:

Method 3-Pictures of unknown height are centered vertically-www.cleanthem.com body {height:100%;} # box {width:500px;height:400px; text-align:center; border:1px solid # d3d3d3itBackgroundRafff;} # box p {width:500px;height:400px; line-height:400px / * Line height is equal to height * /} / * compatible standard browser * / # box p:before {content: "."; / * the specific value has nothing to do with vertical centering. Save characters as much as possible * / margin-left:-5px; font-size:10px; / * repair the small BUG * / visibility:hidden in the center. / * set to hidden element * /} # box p img {* margin-top:_expression ((400-this.height) / 2); / * CSS expression is used to be compatible with IE6/IE7 * / vertical-align:middle; border:1px solid # ccc;}

Thank you for your reading, the above is the "css to achieve any picture vertical center method what" the content, after the study of this article, I believe you css to achieve any picture vertical center method has a deeper understanding of this problem, the specific use of the need for you to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.