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

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

img {
    text-align: center;
}

当前回答

img{
    display: block;
    margin-right: auto;
    margin-left: auto;      
 }

其他回答

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

这是我的解决方案:

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

大多数浏览器都支持translateX

img{
    display: block;
    margin-right: auto;
    margin-left: auto;      
 }

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

内联情况

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

块格

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

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

你问题的答案是:

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

是也不是。

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

参考文献

内联元素列表定心的事情

不是recommendad:

另一种方法是将一个封闭段落居中: <p style="text-align:center"><img src="https://via.placeholder.com/300"></p> .

更新:

如果你想开始学习HTML/CSS，我上面的答案是正确的，但它没有遵循最佳实践

使用这个到你的img CSS:

img {
  margin-right: auto;
  margin-left: auto;
}

推荐文章