中心图像使用文本对齐中心?

属性text-align: center;一个好方法来中心使用CSS图像?

img {
    text-align: center;
}

当前回答

有时我们直接在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 src = "…"/ > < /中心>

我找到的最简单的解决方案是添加到我的img-element:

style="display:block;margin:auto;"

看来我不需要像别人建议的那样在auto前面加0。也许这是正确的方法，但对于我的目的来说，没有“0”也足够了。至少在最新的Firefox、Chrome和Edge上是这样。

如果你想将图像设置为背景，我有一个解决方案:

.image {
    background-image: url(yourimage.jpg);
    background-position: center;
}

这并不总是奏效……如果没有，试试:

img {
    display: block;
    margin: 0 auto;
}

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

这是我的解决方案:

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

大多数浏览器都支持translateX

推荐文章