CSS中定义让图片居中需要用到以下两种方法:/* 方法一:使用text-align属性 */ .container{ text-align:center; } .container img{ disp
CSS中定义让图片居中需要用到以下两种方法:
/* 方法一:使用text-align属性 */ .container{ text-align:center; } .container img{ display:inline-block; } /* 方法二:使用margin属性 */ .container{ width:100%; height:100%; display:flex; justify-content:center; align-items:center; } .container img{ margin:auto; }
方法一通过设置容器的text-align属性为center,再将图片的display设置为inline-block,使得图片水平居中。这种方法只能对单张图片起作用,并且只限于水平居中。
方法二则使用了flex布局,将容器的宽高都设为100%,同时使用flex的justify-content和align-items属性,使其水平和垂直都居中。图片的margin属性设置为auto,则会使其自动水平和垂直居中,达到效果。
粉丝
0
关注
0
收藏
0