Vertical-align mit Bootstrap 3

Question

Ich verwende Twitter Bootstrap 3 und habe Probleme, wenn ich zwei div vertikal ausrichten möchte, zum Beispiel - JSFiddle link:

    Big

    Small

Das Rastersystem in Bootstrap verwendet float: left, nicht display:inline-block, daher funktioniert die Eigenschaft vertical-align nicht. Ich habe versucht, margin-top zu verwenden, um es zu beheben, aber ich denke, dass dies keine gute Lösung für das responsive Design ist.

Answer 1

Ich dachte, ich würde meine "Lösung" teilen, falls sie jemandem hilft, der nicht mit den @media-Abfragen vertraut ist.

Dank der Antwort von @HashemQolami habe ich einige Media Queries erstellt, die mobile-up wie die col-* Klassen funktionieren, sodass ich die col-* für mobile stapeln konnte, aber sie für größere Bildschirme vertikal zentriert anzeigen konnte, z.B.

.

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

Kompliziertere Layouts, die je nach Bildschirmgröße eine unterschiedliche Anzahl von Spalten erfordern (z.B. 2 Reihen für -xs, 3 für -sm und 4 für -md usw.), erfordern einige fortgeschrittenere Handgriffe, aber für eine einfache Seite mit -xs gestapelt und -sm und größer in Reihen funktioniert dies gut.

Answer 2

Ich ziehe diese Methode vor, gemäß David Walsh Vertical Center CSS:

.children{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Das transform ist nicht unerlässlich; es findet das Zentrum nur etwas genauer. Internet Explorer 8 könnte dadurch etwas weniger zentriert sein, aber es ist immer noch nicht schlecht - Kann ich verwenden - 2D-Transformationen.

Answer 3

Dies ist meine Lösung. Fügen Sie einfach diese Klasse zu Ihrem CSS-Inhalt hinzu.

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

Dann würde Ihr HTML so aussehen:

    Element
    Element

    Element

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

    Titel

            Element
            Element

            Element

Answer 4

Ich habe das gerade gemacht und es macht, was ich will.

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

Und jetzt sieht meine Seite so aus

Answer 5

Ich finde wirklich, dass der folgende Code nur in Chrome funktioniert und nicht in anderen Browsern als der aktuell ausgewählte Antwort:

.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

Bootply Link

Sie müssen möglicherweise die Höhen anpassen (speziell bei .v-center) und das div bei div[class*='col-'] für Ihre Bedürfnisse entfernen/ändern.