CSS中如何实现图片居中呢?下面我们来了解一下。/*方法一:使用text-align属性*/ .center{ text-align:center; } /*方法二:使用margin属性*/ .cen
CSS中如何实现图片居中呢?下面我们来了解一下。
/*方法一:使用text-align属性*/ .center{ text-align:center; } /*方法二:使用margin属性*/ .center{ margin: 0 auto; } /*方法三:使用display:flex属性*/ .container{ display:flex; justify-content:center; align-items:center; } .container img{ width: 50%; }
方法一:使用text-align属性
text-align属性是用来设置元素的文本的水平对齐方式。包括left(左对齐)、right(右对齐)和center(居中对齐)。对于inline元素,使用文字居中的方式即可:text-align:center。
方法二:使用margin属性
我们可以通过设置图片的margin来水平居中。特别地。左右margin属性的值可以设置为“auto”,即:margin: 0 auto;这里的“auto”表示我们希望浏览器自动计算margin的值,能够让图片水平居中。
方法三:使用display:flex属性
flex布局(弹性布局)是一种响应式的布局方式,可以为子元素设置水平居中或者垂直居中。通过给父元素设置display:flex,同时设置justify-content:center和align-items:center,可以实现图片的水平和垂直居中。
粉丝
0
关注
0
收藏
0