[分享]css中如何设置图片水平居中显示

在网页设计中，我们经常使用CSS样式来美化页面，其中，设置图片水平居中显示是一个常见的需求。下面介绍几种实现方式。1. 使用textalign属性对img标签进行居中对齐我们可以在父元素样式中设置 t...

在网页设计中，我们经常使用CSS样式来美化页面，其中，设置图片水平居中显示是一个常见的需求。下面介绍几种实现方式。
1. 使用text-align属性对img标签进行居中对齐
我们可以在父元素样式中设置 text-align:center，并将img标签放在该父元素中，从而实现水平居中对齐。
示例如下：

p{
  text-align:center;
}

<p>
  <img src="example.jpg">
</p>

2. 使用margin属性对img标签进行居中对齐
我们可以在img标签的样式中设置 margin:auto，从而实现水平居中对齐。
示例如下：

img{
  display:block;
  margin:auto;
}

3. 使用Flexbox布局
Flexbox布局是CSS3的新布局模型，通过设置容器和元素的display属性为flex，使用justify-content:center； align-items:center;属性，即可轻松实现图片水平垂直居中。
示例如下：

.parent{
  display:flex;
  justify-content:center;
  align-items:center;
}

<div class="parent">
  <img src="example.jpg">
</div>

以上是三种实现图片水平居中对齐的常用方法，可以根据具体情况选择合适的方式进行使用。