有时我们直接在WordPress管理员的页面中添加内容和图像。当我们将图像插入到内容中并想要对齐该中心时。代码显示为:

 **<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**

在这种情况下，你可以像这样添加CSS内容:

article p img{
    margin: 0 auto;
    display: block;
    text-align: center;
    float: none;
}

另一种缩放方法-显示它:

img {
  width: 60%; /* Or required size of image. */
  margin-left: 20% /* Or scale it to move image. */
  margin-right: 20% /* It doesn't matters much if using left and width */
}

边框为0的Display: block和text-align: center元素都不适合我。

这是我的解决方案:

img.center {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}

大多数浏览器都支持translateX

将非背景图像居中取决于您想要将图像显示为内联(默认行为)还是块元素。

内联情况

如果你想保持图像的CSS属性的默认行为，你需要将你的图像包装在另一个块元素中，你必须设置text-align: center;

块格

如果你想把图像看作一个单独的块元素，那么text-align属性没有意义，你应该这样做:

IMG.display {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

你问题的答案是:

属性text-align: center;将图像居中的好方法 使用CSS呢?

是也不是。

是的，如果图像是其包装器中的唯一元素。 不，如果你在图像的包装器中有其他元素，因为所有的子元素都是图像的兄弟姐妹，将继承text-align属性:并且可能你不喜欢这个副作用。

参考文献

内联元素列表 定心的事情

在容器保存图像上，您可以使用css3 Flexbox来完美地将图像置于垂直和水平的中心。

让我们假设你有<div class="container">作为图像持有人:

然后作为CSS，你必须使用:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

这将使这个div中的所有内容完全居中。

我将使用一个div来居中对齐图像。如:

<div align="center"><img src="your_image_source"/></div>