[分享]css中怎么图片水平居中对齐

如果你想让图片在网页中水平居中对齐，在CSS中实现也很简单。在下面的文章中，我们将分享两种方法。第一种方法是通过使用textalign属性。你可以将这个属性设置为center来让文本和图片水平居中对齐...

如果你想让图片在网页中水平居中对齐，在CSS中实现也很简单。在下面的文章中，我们将分享两种方法。
第一种方法是通过使用text-align属性。你可以将这个属性设置为center来让文本和图片水平居中对齐。在下面的CSS代码中，我们把图片包裹在一个div中，并给这个div设置了text-align:center：

 <style>
    .center-img {
      text-align: center;
    }
  </style>
  
  <div class="center-img">
    <img src="example.png" alt="example">
  </div> 

这个方法可以适用于所有情况下需要文字和图片同时水平居中的情况。可以看到，当文本对齐方式为center时，图片自动被置于文本的中央。
第二种方法是使用margin属性。这种方法可以让你对图片应用一定数值的左右margin（边距），从而将它的位置移动到容器正中央。对于这种方法你需要知道图片的宽度，如果是一个固定值，可以手动设置一个等于一半宽度的负margin。

 <style>
    .center-img {
      text-align: center;
    }
    
    .center-img img {
      margin: 0 auto;
    }
  </style>

  <div class="center-img">
    <img src="example.png" alt="example" width="200">
  </div> 

在这个方法中，我们首先给中央对齐元素设置了text-align:center样式，使它内部的元素即图片也自适应居于正中央。接下来，我们为图像元素添加了一个margin样式。这里有两个值，首先是上下的0边距，接下来是左右margin为auto，变通地水平居中了图像。
这两种方法各有优点，是都是可行的解决方案。但是，我们推荐使用方法二，因为它是更通用的，即把margin设置为auto时，图像的水平位置是相对于容器的中心点的。