Bootstrap 4垂直对齐中心在Flex布局上不起作用 [英] Bootstrap 4 vertically align center not working on flex layout

问题描述

使用Bootstrap 4，我有3列的响应式布局，(应)在不同屏幕尺寸上更改顺序，宽度和水平对齐方式.除了屏幕尺寸< 768px上的img的水平中心对齐不起作用之外，其他所有方法都工作正常.这是我的代码:

Using Bootstrap 4, I have a responsive layout with 3 columns, that (should) change order, width, and horizontal alignment on different screen sizes. It all works fine except that the horizontal center alignment of the imgs on screensize <768px does not work. Here's my code:

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

在我的示例代码中，两列中的img均向左对齐.预期的行为应该是两个img在其各自的列中垂直居中对齐.当屏幕尺寸> 768px时，img的列将自动左右浮动(col-md-auto).这是预期的，不应更改.

In my example code the imgs in the 2 columns both align left. The expected behavior should be that both imgs align vertically center in their respective column. On screensize >768px the columns of the imgs automatically float to the left and right (col-md-auto). This is expected and should not be changed.

如何将img放在屏幕尺寸< 768像素的中心?

我发现了类似的问题，例如 Bootstrap 4中的垂直对齐中心和尝试了各种建议的解决方案，例如设置mx-auto，使用d-flex调整内容中心，设置固定宽度等.对我来说，似乎没有任何效果.我想念什么?

I found similar questions such as Vertical Align Center in Bootstrap 4 and tried various suggested solutions, e.g. setting mx-auto, justify-content-center with d-flex, setting a fixed width, etc. Nothing seems to work for me. What am I missing?

推荐答案

您可以给div包含图像:text-align:center.例如:

you can give the divs containing the images : text-align: center. For instance:

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

这篇关于Bootstrap 4垂直对齐中心在Flex布局上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！