Use:

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

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

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

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

用CSS将图像居中。

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

你可以在这里了解更多

我建议有三种方法来居中一个元素:

Using the text-align property .parent { text-align: center; } <div class="parent"> <img src="https://placehold.it/60/60" /> </div> Using the margin property img { display: block; margin: 0 auto; } <img src="https://placehold.it/60/60" /> Using the position property img { display: block; position: relative; left: -50%; } .parent { position: absolute; left: 50%; } <div class="parent"> <img src="https://placehold.it/60/60" /> </div>

第一种和第二种方法只在父元素至少和图像一样宽的情况下才有效。当图像比其父图像宽时，图像将不会保持居中!!

但是: 第三种方法是一个很好的方法!

这里有一个例子:

img { 显示:块; 位置:相对; 左:-50%; ｝ .parent { 位置:绝对的; 左:50%; ｝ < div class = "父" > <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" /> < / div >

另一种缩放方法-显示它:

img {
  width: 60%; /* Or required size of image. */
  margin-left: 20% /* Or scale it to move image. */
  margin-right: 20% /* It doesn't matters much if using left and width */
}

你可以在父元素上使用text-align: center，并将img更改为display: inline-block→，因此它的行为就像一个文本元素，如果父元素有宽度，它将居中!

img {
    display: inline-block
}