Bootstrap 4垂直对齐中心无法在柔性布局上工作

  • Z时代
  • 2024-01-10
  • 分类：问答

使用Bootstrap 4，我有一个响应式布局，包含3列，（应该）在不同的屏幕尺寸上更改顺序，宽度和水平对齐。它所有的工作，只是在屏幕大小< 768px的IMGS的水平居中对齐不正常工作。这里是我的代码：Bootstrap 4垂直对齐中心无法在柔性布局上工作

.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都左对齐。预期的行为应该是两个imgs垂直居中排列在各自的列中。在大于768px的屏幕上，imgs的列自动浮动到左侧和右侧（col-md-auto）。这是预期的，不应该改变。

我该如何将imgs居中显示在屏幕上的列中< 768px？

我发现了类似的问题，比如Vertical Align Center in Bootstrap 4和尝试过各种建议的解决方案，例如设置mx-auto，使用d-flex对齐内容中心，设置固定宽度等等。没有任何东西可以用于我。我错过了什么？

回答：

你可以给包含图像的div：文本对齐：中心。 例如：

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

回答：

对于.mx-auto工作，你需要.d-block。 Aligning images。

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

以上是 Bootstrap 4垂直对齐中心无法在柔性布局上工作 的全部内容， 来源链接： utcz.com/qa/257710.html

回到顶部