Three ways to center images with CSS

In our WEB front-end CSS development process, we avoid the situation of centering the picture. For the sake of the beauty of the web page and the user experience, we sometimes have to center the picture, so we all know how to center the picture. There are many, and today we will give you a detailed introduction to the three ways to center images with CSS!

1. Use display:table-cell, the specific code is as follows:

html code is as follows:

1 <p class="img_wrap">
2  <img  src="/static/imghwm/default1.png"  data-src="wgs.jpg"  class="lazy"   alt="Three ways to center images with CSS" >
3 </p>

css code is as follows:

1 .img_wrap{
2     width: 400px;
3     height: 300px;
4     border: 1px dashed #ccc;
5     display: table-cell; //主要是这个属性
6     vertical-align: middle;
7     text-align: center;
8 }

The effect is as follows:

2. Use the background method:

html code is as follows:

1 <p class="img_wrap"></p>

css code is as follows:

.img_wrap{
    width: 400px;
    height: 300px;
    border: 1px dashed #ccc;
    background: url(wgs.jpg) no-repeat center center;
}

Effect As shown below:

3. Use a p tag outside the picture, and set the line-height to vertically center the picture:

html The code is as follows:

1 <p class="img_wrap">
2     <p><img  src="/static/imghwm/default1.png"  data-src="wgs.jpg"  class="lazy"   alt="Three ways to center images with CSS" ></p>
3 </p>

The css code is as follows:

 1 *{margin: 0px;padding: 0px} 
 2 .img_wrap{ 
 3     width: 400px; 
 4     height: 300px; 
 5     border: 1px dashed #ccc; 
 6     text-align: center;} 
 7 .img_wrap p{ 
 8     width:400px; 
 9     height:300px;
 10     line-height:300px;  /* 行高等于高度 */
 11 }
 12 .img_wrap p img{
 13     *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */
 14     vertical-align:middle;
 15     border:1px solid #ccc;
 16 }

The rendering is as follows:

##Summary:

There are many ways to center pictures. Here we introduce three commonly used methods. You can choose the method that suits you according to your needs. I hope it will be helpful for your work. Helped!

Related recommendations:

How to center the css image

css image centering: css image centering up, down, left, and right (horizontally and vertically centered)

How to center text and images in HTML code?

The above is the detailed content of Three ways to center images with CSS. For more information, please follow other related articles on the PHP Chinese website!