css - Bootstrap : Vertical Align across all devices

Question

更新:

除了在实际 iPhone 上测试时，我似乎一切正常。在我的 iPhone 6 上，布局不像在 chrome 模拟器上测试时那样出现 - 有什么想法吗？确实很奇怪，我的白色 CSS 箭头之一也没有显示。我附上了模拟器和手机的一些截图。

---

我使用以下方法创建了一个 Bootstrap 网格:

<div class="container-fluid">
<div class="row" style="text-align: center;">
<div class="col-md-3 col-sm-6"><img src="images/articles/services/curtain-sliders.png" alt="curtain sliders" /></div>
<div class="col-md-3 col-sm-6 text-cont left-arrow"><h3 class="grid-text">Curtain Sliders</h3></div>
<div class="col-md-3 col-sm-6"><img src="images/articles/services/abnormal-loads.png" alt="abnormal loads" /></div>
<div class="col-md-3 col-sm-6 text-cont left-arrow"><h3 class="grid-text">Abnormal Loads</h3></div>
</div>
<div class="row" style="text-align: center;">
<div class="col-md-3 col-md-push-3 col-sm-6"><img src="images/articles/services/hazardous-goods.png" alt="hazardous goods" /></div>
<div class="col-md-3 col-md-pull-3 col-sm-6 text-cont right-arrow"><h3 class="grid-text">Hazardous Goods</h3></div>
<div class="col-md-3 col-md-push-3 col-sm-6"><img src="images/articles/services/step-frame-plant-movers.png" alt="step frame plant movers" /></div>
<div class="col-md-3 col-md-pull-3 col-sm-6 text-cont right-arrow"><h3 class="grid-text">Heavy Plant Movement</h3></div>
</div>
</div>

类为“text-cont”的 div 需要让 H3 文本在中间垂直对齐，因此为了解决这个问题，我使用了以下 css:

.text-cont {
    height:210px;
    line-height: 215px;
}
.grid-text {
    vertical-align: middle;
    display:inline-block;
}

这在我的 Macbook 上运行良好，但显然没有响应，因此网格在不同的屏幕尺寸上变得不对齐。我是引导新手，因此我一直在四处寻找一种有效的方法来确保 div 响应。

可以找到有问题的页面here , 网格在底部。如果有人可以建议任何明确的资源或简单的解决方案，我将不胜感激。问候

Answer 1

将您的 CSS 更改为:

.text-cont {
    height: 253px;
    line-height: 253px;
}

这应该使网格在较小的设备上保持对齐。它变得不对齐的原因是因为您的图像比较小设备上的 .text-cont div 高得多。