如何使用bootsrap将对象与灯箱居中？

Question

我使用Polo-响应式多功能HTML5模板。 我无法将对象居中

我确实尝试了许多解决方案，但左侧仍然没有任何作用。

查看屏幕截图

<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">


  <div class="col-md-4">
    <div class="grid-item">
      <div class="grid-item-wrap">
        <div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /> </div>
        <div class="grid-description">
          <a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
        </div>
      </div>
    </div>
  </div>
  <!--Single image lightbox -->
  <hr class="space">
</div>

Answer 1

在CSS下方添加以使图像居中对齐

img {
  margin-left: 50%;
  transform: translateX(-50%);
}

<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">


  <div class="col-md-4">
    <div class="grid-item">
      <div class="grid-item-wrap">
        <div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/600x400" /> </div>
        <div class="grid-description">
          <a title="Paper Pouch!" data-lightbox="image" href="images/mockup/1.jpg" class="btn btn-light btn-rounded">Zoom</a>
        </div>
      </div>
    </div>
  </div>
</div>
<!--Single image lightbox -->
<hr class="space">

Answer 2

代替 <div class="col-md-4">

执行以下操作：

<div class="col-md-12 text-center">

.text-center是引导程序类，它将使图像相对于列居中

.col-md-12表示整行中只有一列

Answer 3

这不是唯一的解决方案，这是一个建议：）

您可以将offset-md-4类与text-center结合使用，它应该可以工作。

还要考虑移动设备。我已经添加了offset-2和col-8以确保它在小屏幕上看起来也不错。

img {
  max-width: 100%;
  margin: auto;
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="hr-title hr-long center">
  <abbr>Single image lightbox</abbr>
</div>
<div class="container">
  <div class="row col-no-margin">
    <div class="offset-2 col-8 offset-md-4 col-md-4 text-center">
      <div class="grid-item">
        <div class="grid-item-wrap">
          <div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /></div>
          <div class="grid-description">
            <a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--Single image lightbox -->
<hr class="space">