Frage Vertical-Align mit Bootstrap 3


Ich benutze Twitter Bootstrap 3, und ich habe Probleme, wenn ich vertikal zwei ausrichten möchte div, beispielsweise - JSFiddle-Verknüpfung:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Das Grid-System in Bootstrap verwendet float: leftnicht display:inline-blockso das Eigentum vertical-align funktioniert nicht. Ich habe es versucht margin-top um es zu beheben, aber ich denke, das ist keine gute Lösung für das responsive Design.


753
2017-12-12 15:43


Ursprung


Antworten:


Diese Antwort präsentiert einen Hack, aber ich würde Ihnen wärmstens empfehlen, flexbox zu benutzen (wie in @Haschem Antwort), da es jetzt überall unterstützt wird.

Demo-Link: 
  - Bootstrap 3 
  - Bootstrap 4 Alpha 6 

Sie können weiterhin eine benutzerdefinierte Klasse verwenden, wenn Sie sie benötigen:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Bootply

Verwenden inline-block fügt zusätzlichen Platz zwischen Blöcken hinzu, wenn Sie einen echten Platz in Ihrem Code lassen (wie ...</div> </div>...). Dieser zusätzliche Platz durchbricht unser Raster, wenn die Spaltengrößen 12 ergeben:

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Hier haben wir extra Leerzeichen dazwischen <div class="[...] col-lg-2"> und <div class="[...] col-lg-10"> (ein Wagenrücklauf und 2 Tabs / 8 Leerzeichen). Und so...

Enter image description here

Lasst uns diesen zusätzlichen Raum treten !!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Enter image description here

Beachten Sie die scheinbar nutzlose Kommentare <!-- ... -->? Sie sind wichtig - ohne sie, das Leerzeichen zwischen den <div> Elemente nehmen Platz im Layout ein und brechen das Rastersystem.

Hinweis: Die Bootply wurde aktualisiert


836
2017-12-12 16:17



Flexibles Box-Layout

Mit dem Aufkommen der CSS Flexible Box, viele Albträume der Webdesigner1 wurden gelöst. Einer der hacky, die vertikale Ausrichtung. Jetzt ist es sogar möglich, in unbekannte Höhen.

"Zwei Jahrzehnte Layout-Hacks gehen zu Ende. Vielleicht nicht morgen,   aber bald und für den Rest unseres Lebens. "

- CSS legendär Eric Meyer beim W3Conf 2013

Flexible Box (kurz Flexbox) ist ein neues Layout-System, das speziell für Layout-Zwecke entwickelt wurde. Das Spezifikation Staaten:

Flex-Layout ähnelt oberflächlich dem Block-Layout. Es fehlen viele von   die komplexeren text- oder dokumentenzentrierten Eigenschaften, die verwendet werden können   im Block-Layout, wie zum Beispiel Floats und Spalten. Im Gegenzug gewinnt es einfach   und leistungsstarke Tools zur Verteilung von Speicherplatz und zur Ausrichtung von Inhalten auf verschiedene Arten   das brauchen Webapps und komplexe Webseiten oft.

Wie kann es in diesem Fall helfen? Okay, lass uns nachsehen.


Vertikal ausgerichtete Spalten

Mit Twitter Bootstrap haben wir .rowIch habe welche .col-*s. Alles, was wir tun müssen, ist das gewünschte zu zeigen .row2 Als ein Flexbehälter Box und dann alle seine ausrichten Flex-Artikels (die Spalten) vertikal nach align-items Eigentum.

BEISPIEL HIER  (Bitte lesen Sie die Kommentare mit Sorgfalt)

<div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>
.vertical-align {
    display: flex;
    align-items: center;
}

Die Ausgabe

Vertical aligned columns in Twitter Bootstrap

Der farbige Bereich zeigt die Füllbox von Spalten an.

Klärung auf align-items: center

8.3 Querachsenausrichtung: die align-items Eigentum

Flex-Artikel kann in der ausgerichtet werden Querachse der aktuellen Linie des Flex - Containers, ähnlich wie justify-contentaber in der senkrechten Richtung. align-items Legt die Standardausrichtung für alle Objekte des Flex-Containers fest, einschließlich anonymer Objekte Flex-Artikel.

align-items: center;   Nach dem Mittelwert, der Flex-ArtikelDie Rand-Box ist in der Mitte zentriert Querachse innerhalb der Linie.


Große Warnung

Wichtiger Hinweis # 1: Twitter Bootstrap gibt das nicht an width Spalten in extra kleinen Geräten, es sei denn, Sie geben eine von .col-xs-# Klassen zu den Spalten.

Deshalb habe ich in dieser speziellen Demo verwendet .col-xs-* Klassen, damit Spalten im mobilen Modus richtig angezeigt werden, da sie die width der Spalte explizit.

Aber alternativ könnten Sie ausschalten das Flexbox-Layout einfach durch Ändern display: flex; zu display: block; in bestimmten Bildschirmgrößen. Zum Beispiel:

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

Oder du könntest angeben .vertical-align  nur auf bestimmten Bildschirmgrößen so:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

In diesem Fall würde ich mitgehen @KevinNelsonist es Ansatz.

Wichtiger Hinweis # 2: Herstellerpräfixe werden aus Platzgründen weggelassen. Die Flexbox-Syntax wurde während der Zeit geändert. Die neue geschriebene Syntax funktioniert nicht mit älteren Versionen von Webbrowsern (aber nicht so alt wie Internet Explorer 9! Flexbox wird in Internet Explorer 10 und höher unterstützt).

Dies bedeutet, dass Sie auch Eigenschaften verwenden sollten, die vom Hersteller stammen display: -webkit-box und so weiter im Produktionsmodus.

Wenn Sie auf klicken "Kompilierte Ansicht umschalten" in dem Demo, sehen Sie die Präfix-Version von CSS-Deklarationen (dank Autoprefixer).


Spalten mit voller Höhe mit vertikal ausgerichteten Inhalten

Wie Sie in der vorherige Demo, Säulen (die flexiblen Gegenstände) sind nicht mehr so ​​hoch wie ihr Behälter (der flexible Behälterkasten, d .row Element).

Dies ist wegen der Verwendung center Wert für align-items Eigentum. Der Standardwert ist stretch damit die Elemente die gesamte Höhe des übergeordneten Elements ausfüllen können.

Um das zu beheben, können Sie hinzufügen display: flex; zu den Spalten auch:

BEISPIEL HIER  (Noch einmal, beachten Sie die Kommentare)

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

Die Ausgabe

Full-height columns with vertical aligned contents in Twitter Bootstrap

Der farbige Bereich zeigt die Füllbox von Spalten an.

Zu guter LetztBeachten Sie, dass die Demos und Codeschnipsel hier eine andere Idee vermitteln sollen, um einen modernen Ansatz zur Erreichung des Ziels zu bieten. Bitte beachten Sie die "Große Warnung"Abschnitt, wenn Sie diesen Ansatz in realen Websites oder Anwendungen verwenden.


Für weiterführende Informationen einschließlich der Browserunterstützung wären diese Ressourcen nützlich:


1. Richten Sie ein Bild innerhalb eines div mit einer ansprechenden Höhe vertikal aus 2. Es ist besser, eine zusätzliche Klasse zu verwenden, um den Standard von Twitter Bootstrap nicht zu ändern .row.


803
2017-08-27 00:09



Der folgende Code funktionierte für mich:

.vertical-align {
    display: flex;
    align-items: center;
}

27
2017-10-01 15:01



Versuchen Sie dies im CSS des div:

display: table-cell;
vertical-align: middle;

23
2017-12-12 16:20



Wenn Sie die akzeptierte Antwort nicht verwenden möchten, wenn Sie das Markup nicht anpassen möchten, um Probleme zu trennen, oder einfach weil Sie ein CMS verwenden, funktioniert die folgende Lösung:

.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid #000">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid #F00">Small</div>
   </div>
 </div>

Die Einschränkung besteht darin, dass Sie die Schriftgröße nicht vom übergeordneten Element erben können, da die Zeile die Schriftgröße auf 0 setzt, um Leerraum zu entfernen.


20
2018-01-27 09:11



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

Dank der Antwort von @ HashemQolami habe ich einige Medienabfragen erstellt, die wie die Col- * -Klassen mobil funktionieren würden, so dass ich die col- * für mobile Geräte stapeln und vertikal in der Mitte für größere Bildschirme, z.

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

.

.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 eine unterschiedliche Anzahl von Spalten pro Bildschirmauflösung erfordern (z. B. 2 Zeilen für -xs, 3 für -sm und 4 für -md usw.), würden etwas fortgeschritteneres Finnen erfordern, aber für eine einfache Seite mit -xs gestapelt und -sm und größer in Reihen, das funktioniert gut.


19
2018-01-05 00:05



Ich bevorzuge diese Methode nach David Walsh Vertikales Zentrum CSS:

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

Das transform ist nicht wesentlich; es findet das Zentrum nur etwas genauer. Der Internet Explorer 8 könnte dadurch etwas weniger zentriert sein, aber es ist immer noch nicht schlecht - Kann ich verwenden - Transforms 2d.


16
2018-02-14 19:21



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

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

Und jetzt sieht meine Seite so aus

<div class='container-fluid align-middle'>
    content

 ----------------------------------
 |                                |
 |   --------------------------   |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |   --------------------------   |
 |                                |
 ----------------------------------

13
2018-05-31 23:13



Aktualisierung 2018

Ich weiß, dass die ursprüngliche Frage für Bootstrap 3 war, aber jetzt, da Bootstrap 4 veröffentlicht wurde, gibt es hier einige aktualisierte Anleitungen zu vertikalem Zentrum.

Wichtig!  Das vertikale Zentrum ist relativ zum Höhe des Elternteils

Wenn das übergeordnete Element des Elements, das Sie zu zentrieren versuchen, nicht definiert ist    Höhe, keiner der vertikalen Zentrierlösungen wird funktionieren!

Bootstrap 4

Jetzt, dass BS4 ist Flexbox standardmäßig Es gibt viele verschiedene Ansätze zur vertikalen Ausrichtung mit: automatische Ränder, Flexbox-Utensilien, oder der zeige utils an zusammen mit vertikale Ausrichtung. Zunächst scheint "vertical align utils" offensichtlich zu sein nur arbeiten mit Inline- und Tabellenanzeigeelementen. Hier sind einige vertikale Optionen für Bootstrap 4.


1 - Vertikales Zentrum mit automatischen Seitenrändern:

Eine andere Möglichkeit, vertikal zu zentrieren, ist die Verwendung my-auto. Dadurch wird das Element in seinem Container zentriert. Beispielsweise, h-100 macht die Zeile volle Höhe, und my-auto wird vertikal zentrieren col-sm-12 Säule.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

BS4 - Vertikale Mitte mit automatischen Rändern Demo

my-auto stellt Ränder auf der vertikalen y-Achse dar und entspricht:

margin-top: auto;
margin-bottom: auto;

2 - Vertikales Zentrum mit Flexbox:

vertical center grid columns

Seit Bootstrap 4 .row ist jetzt display:flex du kannst es einfach benutzen align-self-center auf jeder Spalte, um es vertikal zu zentrieren ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

oder, verwenden align-items-center im ganzen .row um alle vertikal auszurichten col-* in der Reihe...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

BS4 - Vertikale Mittelstützen mit unterschiedlicher Höhe Demo


3 - Vertikales Zentrum mit Anzeige-Utils:

Bootstrap 4 hat zeige utils an das kann für verwendet werden display:table, display:table-cell, display:inline, etc .. Diese können mit dem verwendet werden vertikale Ausrichtung um Inline-, Inline-Block- oder Tabellenzellenelemente auszurichten.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

BS4 - Vertikales Zentrum mit Display-Utils Demo

Siehe auch: Vertical Align Center im Bootstrap 4


Bootstrap 3

Flexbox-Methode für den Container der zu zentrierenden Objekte:

.display-flex-center {
    display:flex;
    align-items:center;
}

Transformiere translateY-Methode:

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

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

Inline-Methode anzeigen:

.display-inline-block {
    display:inline;
}
.display-inline-block > div {
    display:inline-block;
    float:none;
    vertical-align: middle;
}

Demo von Bootstrap 3 Zentriermethoden


12
2018-03-21 12:14



Ich finde wirklich, dass der folgende Code mit Chrome funktioniert und nicht mit anderen Browsern als die 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-Verbindung

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


9
2017-07-12 19:57



Ich bin auf dasselbe Problem gestoßen. In meinem Fall kannte ich die Höhe des äußeren Containers nicht, aber so habe ich es behoben:

Stellen Sie zuerst die Höhe für Ihre html und body Elemente, so dass sie 100% sind. Das ist wichtig! Ohne dies, die html und body Elemente erben einfach die Höhe ihrer Kinder.

html, body {
   height: 100%;
}

Dann hatte ich eine äußere Containerklasse mit:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

Und schließlich der innere Container mit Klasse:

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

HTML ist so einfach wie:

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

Das ist alles, was Sie zum vertikalen Ausrichten von Inhalten benötigen. Schau es dir in der Geige an:

JFiddle


7
2017-12-28 12:08