html - 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

您可以将以下 Bootstrap 帮助程序类应用于父 div:

text-center

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

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

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