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

img {
    text-align: center;
}

当前回答

不是recommendad:

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

更新:

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

其他回答

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

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

我看到了这个帖子,它对我很有用:

img { 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; 保证金:汽车; } < span style=" font - family:宋体;"位置:相对;最小高度:200 px”> < img src = " https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a " > < / div >

(纵横对齐)

这将不起作用,因为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-element:

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

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

Use:

<dev class="col-sm-8" style="text-align: center;"><img src="{{URL('image/car-trouble-with-clipping-path.jpg')}}" ></dev>

我认为这是在Laravel框架中将图像居中的方法。