bootstrap列中的图像右侧有空格

Question

编辑：这是我的问题 bootstrap 4 center-block unable to center

我不能为我的生活弄清楚如何在bootstrap列中正确对齐此图像。您可以看到图像边框与图像所在的div列的填充之间图像右侧有一个大的空白间隙。

我有一行有3列。我希望2页图像在页面中正确对齐。如果没有出现这个尴尬的空白，这将更容易实现。

目前，我已将以下内容添加为（不是）快速解决方案。

.right-img {
    padding-left: 45px;
}

我尝试了几种途径，包括

class="center-block"

并删除

float-left 

来自show-image类和flexbox和display-block以及所有对齐属性，并确保我在行上方有一个容器。

如果有人可以帮助解决这个问题我真的很感激。

这是HTML：

<div class="container">
    <div class="row">
      <div class="col-lg-5 show-image">
        <img class="img-responsive rounded head-img" src="{{ url_for('static', filename='#') }}" alt="Image Failed to Load">
        <div class="hover-buttons">
          <button type="submit" class="btn btn-danger btn-sm">Why Join?</button>
          <button type="submit" class="btn btn-danger btn-sm">How It Works</button>
        </div>
      </div>
      <div class="col-lg-2" id="with-container">
        <h1 class="my-4 text-center">WITH</h1>
      </div>
      <div class="col-lg-5 show-image right-img">
        <img class="img-fluid rounded head-img" src="{{url_for('static', filename='#')}}" alt="Image Failed to Load">
        <div class="hover-buttons left-buttons">
          <button type="submit" class="btn btn-danger btn-sm">Why Join?</button>
          <button type="submit" class="btn btn-danger btn-sm">How It Works</button>
        </div>
      </div>
    </div>
  </div>

这是造型：

    div {
    border: 1px dashed red;
}

.head-img {
    width:  400px;
    height: 287px;
}

#with-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.show-image {
    position: relative;
    float: left;
}

div.show-image:hover img{
    opacity:0.5;
}

div.show-image:hover .hover-buttons {
    display: inline-block;
}

.hover-buttons {
    position: absolute;
    display:none;
}

div.show-image .hover-buttons {
    top: 75%;
    left: 12%;
}

div.show-image .left-buttons {
    top: 75%;
    left: 19%;
}

Answer 1

您可以将以下引导辅助类应用于父div：

text-center

哪个应该为您水平对齐图像。完整的div类结构应如下所示：

<div class="col-lg-5 show-image text-center">

进一步阅读：https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment