Bootstrap 4垂直对齐中心不适用于flex布局答案

【问题标题】：Bootstrap 4 vertically align center not working on flex layoutBootstrap 4垂直对齐中心不适用于flex布局
【发布时间】：2017-12-13 10:24:20
【问题描述】：

使用 Bootstrap 4，我有一个包含 3 列的响应式布局，它（应该）在不同的屏幕尺寸上更改顺序、宽度和水平对齐方式。除了屏幕尺寸

.icon-xl-large {
  width: 80px;
}

.w-400px {
  max-width: 400px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row justify-content-center justify-content-md-between">
  <div class="order-md-1 col-6 col-md-auto align-self-center">
    <img src="http://via.placeholder.com/350x350" alt="" class="icon-xl-large mx-auto" >
  </div>
  <div class="order-md-3 col-6 col-md-auto align-self-center">
    <img src="http://via.placeholder.com/350x350" alt="" class="icon-xl-large mx-auto" >
  </div>
  <div class="col-12 order-md-2 col-md-6 w-400px text-center">
    <h5>Sample text in center</h5>
  </div>
</div>

在我的示例代码中，2 列中的 imgs 都左对齐。预期的行为应该是两个 img 在各自的列中垂直居中对齐。在屏幕尺寸 >768px 上，img 的列会自动左右浮动（col-md-auto）。这是预期的，不应更改。

如何在屏幕尺寸

我发现了类似的问题，例如Vertical Align Center in Bootstrap 4，并尝试了各种建议的解决方案，例如使用 d-flex 设置 mx-auto、justify-content-center、设置固定宽度等。似乎没有什么对我有用。我错过了什么？

【问题讨论】：

标签： twitter-bootstrap css flexbox bootstrap-4

【解决方案1】：

你可以给包含图像的 div：text-align:center。例如：

@media (max-width: 768px) {
    .col-6.col-md-auto.align-self-center {
        text-align:center;
    }
}

【讨论】：

【解决方案2】：

要使.mx-auto 工作，您需要.d-block。 Aligning images。

<img src="http://via.placeholder.com/350x350" alt="" class="icon-xl-large mx-auto d-block">

【讨论】：