CSS style for vertically centering images within a div with variable width and height

This article mainly introduces the css style for vertical centering of images in variable width and height divs. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

This article mainly introduces It introduces how to vertically center the image in p when the width and height are variable, and how to write the css style? The sample code is as follows

The simplest method is to set the css attribute of the outer element:

p{ 
display: table-cell; 
}

But IE6/7 does not support this css style. In order to be compatible with them, you can use the following method. The structure of

html is as follows:

<p><span></span><img src="/static/imghwm/default1.png"  data-src="test.png"  class="lazy"   alt=""></p>

css code is as follows:

p{ 
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; 
}

By setting the above properties, the effect of the picture below can be achieved. The picture is vertically centered in p.

The principle of this method is to insert an empty span tag in front of the img tag and use it to expand the row height in p to 100%.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to set vertical centering for images of unknown height

About CSS banner image responsive centering display Methods

The above is the detailed content of CSS style for vertically centering images within a div with variable width and height. For more information, please follow other related articles on the PHP Chinese website!