Bootstrap: Vertikale Ausrichtung auf allen Geräten

Question

Update:

Ich scheine alles außer zu arbeiten zu haben, wenn sie auf einem tatsächlichen iPhone zu testen. Auf meinem iPhone 6 sieht das Layout nicht so aus wie beim Testen auf dem Chrome Emulator - irgendwelche Ideen? Es ist in der Tat sehr seltsam, einer meiner weißen CSS-Pfeile wird auch nicht angezeigt. Ich habe einige Screenshots des Emulators und des Telefons beigefügt.

---

Ich habe ein Bootstrap Gitter unter Verwendung der folgenden erstellt:

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

Die divs mit Klasse 'text-cont' benötigt die H3 Text haben in der Mitte vertikal ausgerichtet sind, so zu address this Ich habe die folgenden css verwendet:

Dies funktioniert gut auf meinem Macbook, aber offensichtlich reagiert nicht so die Gitter wird auf verschiedenen Bildschirmgrößen falsch ausgerichtet. Ich bin ein Bootstrap-Neuling, also bin ich auf der Suche nach einem effizienten Weg, dies zu tun, um sicherzustellen, dass die divs reagieren.

Die betreffende Seite kann here gefunden werden, das Raster ist an der Unterseite. Wenn jemand irgendwelche definitive Ressourcen oder eine einfache Lösung vorschlagen könnte, wäre ich sehr dankbar. Mit freundlichen Grüßen D

Answer 1

Versuchen Sie mit flexbox.

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

Wenn Sie eine Höhe auf Ihre .text-cont Klasse geben wollen, können Sie eine Höhe geben. Wenn Sie keine Höhe angeben möchten, fügen Sie dem übergeordneten Container auch eine Flexbox hinzu.

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

In der ansprechenden Ansicht, die Sie hinzufügen können, mit der feinfühligen Ansicht umgehen

@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 Um dies zu ändern:

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

Das das Raster auf kleineren Geräten ausgerichtet halten sollte. Der Grund dafür ist, dass Ihre Bilder viel größer sind als die .text-cont div auf kleineren Geräten.

Answer 3

Aktualisieren Sie Ihre CSS mit diesem

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