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

img {
    text-align: center;
}

当前回答

Use:

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

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

其他回答

除非你需要支持旧版的ie浏览器。

现代的方法是在CSS中使用margin: 0 auto。

例如:http://jsfiddle.net/bKRMY/

HTML:

<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>

CSS:

p.pic {
    width: 48px;
    margin: 0 auto;
}

这里唯一的问题是,段落的宽度必须与图像的宽度相同。如果你没有在段落上设置宽度,它将不起作用,因为它将假设100%并且你的图像将向左对齐,当然除非你使用text-align:center。

如果你喜欢,可以试试这把小提琴。

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

内联情况

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

块格

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

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

你问题的答案是:

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

是也不是。

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

参考文献

内联元素列表 定心的事情

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

img {
    display: block;
    margin: 0 auto;
}
.img-container {
  display: flex;
}

img {
  margin: auto;
}

这将使图像在垂直和水平方向上处于中心位置

不是recommendad:

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

更新:

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