css a图片居中对齐

CSS中如何使一个a标签内的图片居中对齐呢？下面给出两种方法。

方法一：使用text-align属性

a {
  display: inline-block;
  text-align: center;
}

a img {
  display: block;
}

在a标签上设置display为inline-block，这样a标签会保留它与其他元素之间的间距，并且可以设置宽高。在a标签上使用text-align:center，则会将a标签内的所有内容水平居中对齐。最后，在img标签上设置display为block，使img标签变成块级元素，这样可以设置宽高和margin。这样，图片就可以水平居中对齐了。

方法二：使用flex布局

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

a img {
  display: block;
}

在a标签上设置display为flex，使其成为一个容器。使用align-items:center和justify-content:center属性，则可以将a容器内的元素在横向和纵向上居中对齐。最后，将img标签设置为块级元素，同样可以设置宽高和margin。这样，图片也可以水平居中对齐了。