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

This article mainly explains "how to achieve the vertical center of the picture in the div style of css", the content of the article 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 "how to achieve the vertical center of the picture in the div css style" it!

The easiest way is to set the css attribute of the outer element:

The code is as follows:

Div {

Display: table-cell

}

However, IE6/7 does not support this css style, and the following methods can be used for compatibility.

The structure of html is as follows:

The code is as follows:

The css code is as follows:

The code is as follows:

Div {

Width: 100px

Height: 100px

Border: 1px solid # ccc

}

Span {

Line-height: 100%

Vertical-align: middle

Display: inline-block

Height: 100%

}

Img {

Width: 100%

Vertical-align: middle

}

You can achieve the effect of the following image by setting the above properties, and the image is centered vertically in the div.

The principle of this method is to insert an empty span tag in front of the img tag and use it to prop up the rows in the div up to 100%.

Thank you for your reading, the above is "how to achieve variable width and height div pictures vertically centered css style" of the content, after the study of this article, I believe you on how to achieve variable width and height div pictures vertically centered css style this problem has a more profound understanding, the specific use of the need for you to practice verification. 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.