使用 Bootstrap 4,我有一个包含 3 列的响应式布局,它(应该)在不同的屏幕尺寸上更改顺序、宽度和水平对齐方式。除了屏幕尺寸 <768px 上 imgs 的水平居中对齐不起作用之外,一切正常。这是我的代码:
.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>
在我的示例代码中,两列中的 imgs 都向左对齐。预期的行为应该是两个 imgs 在各自的列中垂直居中对齐。在屏幕尺寸 >768px 上,imgs 的列会自动向左和向右浮动(col-md-auto)。这是意料之中的,不应更改。
如何将 imgs 在屏幕大小 <768px 的列中居中?
我发现了类似的问题,例如Bootstrap 4 中的 Vertical Align Center,并尝试了各种建议的解决方案,例如设置 mx-auto、justify-content-center 与 d-flex、设置固定宽度等。似乎对我没有任何作用。我错过了什么?
您可以提供包含图像的 div:文本对齐:居中。例如:
@media (max-width: 768px) {
.col-6.col-md-auto.align-self-center {
text-align:center;
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句