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>

带课程的div＆＃39; text-cont＆＃39;需要在中间垂直对齐H3文本，所以为了解决这个问题，我使用了以下css：

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

这在我的Macbook上工作正常，但显然没有响应，因此网格在不同的屏幕尺寸上变得不对齐。我是一个自助新手，因此我一直在寻找一种有效的方法来确保div有响应。

可以找到相关页面here，网格位于底部。如果有人能提出任何明确的资源或简单的解决方案，我将非常感激。问候 d

Answer 1

尝试使用flexbox。

.text-cont{
       display: -webkit-flex;
       display: -moz-box;
       display: -ms-flexbox;
       display:flex;
       align-items:center;
       justify-content:center;
    }

如果你想给你的.text-cont课程增加一个高度，你可以给出一个高度。如果你不想给出一个高度，那么也将flexbox添加到父容器中。

.zen-module-body .row{
           display: -webkit-flex;
           display: -moz-box;
           display: -ms-flexbox;
           display:flex;
}

在响应式视图中，您可以添加，以处理响应式视图

@media (max-width: 767px){

    .zen-module-body .row{
        flex-wrap:wrap;
    }

    .zen-module-body .container-fluid .row:first-child .col-sm-push-3.left-arrow:after{
        transform: rotate(180deg);
        right: auto;
        left: 100%;
    }

    .zen-module-body .container-fluid .row:last-child .col-sm-pull-3.right-arrow:after{
        transform: none;
        right: 100%;
        left: auto;
    }
}

Answer 2

将CSS更改为：

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

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

Answer 3

使用此

更新您的CSS

.text-cont {
    height:314px;
}
.grid-text {
    position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Bootstrap：Vertical对齐所有设备

3 个答案: