How to realize the css style of vertical centering of pictures in div with variable width and height
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!
