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 bin auf dasselbe Problem gestoßen. In meinem Fall kannte ich nicht die Höhe des äußeren Containers, aber so habe ich es behoben:

Legen Sie zunächst die Höhe für Ihre html und body Elemente fest, damit sie zu 100% sind. Das ist wichtig! Ohne dies werden die html und body Elemente einfach die Höhe ihrer Kinder erben.

html, body {
   height: 100%;
}

Dann hatte ich eine äußere Container-Klasse mit:

.container {
  display: table;
  width: 100%;
  height: 100%; /* Für mindestens Firefox */
  min-height: 100%;
}

Und schließlich den inneren Container mit Klasse:

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTML ist so einfach wie:

        Vertikal zentriert

Das ist alles, was Sie brauchen, um Inhalte vertikal auszurichten. Schauen Sie es sich im Fiddle an:

Jsfiddle

Answer 2

Es besteht kein Bedarf an Tabellen und Tabellenzellen. Dies kann leicht mit Hilfe von transform erreicht werden.

Beispiel: http://codepen.io/arvind/pen/QNbwyM

Code:

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

      Groß

      Klein

Answer 3

Wenn Sie die Less Version von Bootstrap verwenden und selbst in CSS kompilieren, können Sie einige Hilfsklassen verwenden, die mit Bootstrap-Klassen verwendet werden können.

Ich habe festgestellt, dass diese fantastisch funktionieren, wenn ich die Reaktionsfähigkeit und Konfigurierbarkeit des Bootstrap-Rasters erhalten möchte (z. B. mit -md oder -sm), aber alle Spalten in einer bestimmten Zeile die gleiche vertikale Höhe haben möchten (damit ich ihren Inhalt dann vertikal zentrieren und alle Spalten in der Zeile einen gemeinsamen Mittelpunkt teilen können).

CSS/Less:

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML:

        ...

        ...

Answer 4

Ich habe etwas näher auf zessx's Antwort eingegangen, um es einfacher zu machen, wenn verschiedene Spaltenbreiten auf verschiedenen Bildschirmgrößen gemischt werden.

Wenn Sie Sass verwenden, können Sie dies zu Ihrer scss-Datei hinzufügen:

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

Das generiert den folgenden CSS (das Sie direkt in Ihren Stylesheets verwenden können, wenn Sie kein Sass verwenden):

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

Jetzt können Sie es auf Ihren responsiven Spalten wie folgt verwenden:

                Dieser Inhalt ist auf Tablets und größeren Geräten vertikal ausgerichtet. Auf dem mobilen Gerät wird er die Bildschirmbreite einnehmen.

                Dieser Inhalt ist auf Tablets und größeren Geräten vertikal ausgerichtet. Auf dem mobilen Gerät wird er die Bildschirmbreite einnehmen.

                Dieser Inhalt ist auf Desktops und größeren Geräten vertikal ausgerichtet. Auf Tablets und kleineren Geräten wird er die Bildschirmbreite einnehmen.

                Dieser Inhalt ist auf Desktops und größeren Geräten vertikal ausgerichtet. Auf Tablets und kleineren Geräten wird er die Bildschirmbreite einnehmen.

Answer 5

Flexverhalten werden seit Bootstrap 4 nativ unterstützt. Fügen Sie d-flex align-items-center im row div hinzu. Sie müssen Ihren CSS-Inhalt nicht mehr ändern.

Einfaches Beispiel: http://jsfiddle.net/vgks6L74/

    Groß 
   Klein 

Mit Ihrem Beispiel: http://jsfiddle.net/7zwtL702/

        Groß

        Klein

Quelle: Flex · Bootstrap