Bootstrap 3垂直图像对齐[重复]

Question

我有一个非常基本的 html 结构，它有一行分成两个偶数列。我有两张同样大小的图片，需要一张在每一列中水平和垂直居中。

  <div class="container">
      <div class="row">
          <div class="col-md-6">
              <img src="example.png" />
          </div>
          <div class="col-md-6">
              <img src="example.png" />
          </div>
      </div>
  </div>

页面外观的线框图如下：

我认为这可以通过引导中心课程来实现。我也尝试过使用 flexbox 自定义 css。我觉得我遗漏了一些东西，因为我希望这很简单，但我的图片漂浮在页面顶部。

Answer 1

在 CSS 中将它们布局为表格

.container .row {
    display: table;
    width: 100%;
}
.container .col-md-6 {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

取自https://css-tricks.com/centering-in-the-unknown/