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

img {
    text-align: center;
}

当前回答

不是recommendad:

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

更新:

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

其他回答

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

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

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

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

有时我们直接在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;
}

这将不起作用,因为text-align属性适用于块容器,而不是内联元素,而img是一个内联元素。请参阅W3C规范。

用这个代替:

img。中心{ 显示:块; 保证金:0自动; } < span style=" font - family:宋体;"> <img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"> < / div >

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