it-swarm.com.de

vertikal ausrichten mit Bootstrap 3

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

<!-- 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 Gittersystem in Bootstrap verwendet float: left, nicht display:inline-block, daher funktioniert die Eigenschaft vertical-align nicht. Ich habe versucht, es mit margin-top zu beheben, aber ich denke, dies ist keine gute Lösung für das responsive Design.

852
corinem

Diese Antwort stellt einen Hack dar, aber ich würde Ihnen wärmstens empfehlen, flexbox (wie in @ Haschem answer angegeben) zu verwenden, da sie jetzt überall unterstützt wird.

Demolink:
- Bootstrap
- Bootstrap 4 alpha 6

Sie können eine benutzerdefinierte Klasse auch dann 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

Die Verwendung von inline-block fügt zusätzlichen Abstand zwischen Blöcken hinzu, wenn Sie in Ihrem Code einen realen Abstand lassen (wie ...</div> </div>...). Dieser zusätzliche Platz bricht unser Raster, wenn die Spaltengröße 12 ergibt:

<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 zusätzliche Leerzeichen zwischen <div class="[...] col-lg-2"> und <div class="[...] col-lg-10"> (ein Wagenrücklauf und 2 Tabulatoren/8 Leerzeichen). Und so...

Enter image description here

Lassen Sie 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 nutzlosen Kommentare <!-- ... -->? Sie sind wichtig - ohne sie nimmt der Leerraum zwischen den <div> -Elementen Platz im Layout ein und bricht das Rastersystem.

Hinweis: Der Bootply wurde aktualisiert

905
zessx

Flexibles Schachtellayout

Mit dem Aufkommen der CSS Flexible Box haben viele Webdesigner Albträume1 wurden gelöst. Eine der abgefahrensten, die vertikale Ausrichtung. Jetzt ist es sogar in unbekannten Höhen möglich .

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

- CSS Legendary Eric Meyer at W3Conf 201

Flexible Box (oder kurz Flexbox) ist ein neues Layoutsystem, das speziell für Layoutzwecke entwickelt wurde. Die Spezifikationszustände :

Das Flex-Layout ähnelt oberflächlich dem Block-Layout. Es fehlen viele der komplexeren text- oder dokumentenzentrierten Eigenschaften, die im Blocklayout verwendet werden können, z. B. Floats und Spalten. Im Gegenzug erhält es einfache und leistungsstarke Tools zum Verteilen von Speicherplatz und Ausrichten von Inhalten auf eine Art und Weise, die Webanwendungen und komplexe Webseiten häufig benötigen.

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


Vertikal ausgerichtete Spalten

Mit Twitter Bootstrap haben wir _.row_ mit einigen _.col-*_. Alles, was wir tun müssen, ist die Anzeige des gewünschten _.row_2 als flex container Box und richten Sie dann alle flex item s (die Spalten) vertikal nach align-items aus.

BEISPIEL HIER (Bitte lesen Sie die Kommentare sorgfältig durch)

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

Farbiger Bereich zeigt die Auffüllbox der Spalten an.

Klarstellung über _align-items: center_

8.3 Querachsenausrichtung: die _align-items_ -Eigenschaft

Flex-Elemente kann in der Querachse der aktuellen Zeile des Flex-Containers ausgerichtet werden, ähnlich wie justify-content , jedoch in der Senkrechten Richtung. align-items legt die Standardausrichtung für alle Elemente des Flex-Containers fest, einschließlich anonymer Flex-Elemente .

_align-items: center;_ Nach dem Mittelwert wird das Randfeld Flex-Element in Querachse innerhalb der Linie zentriert.


Großer Alarm

Wichtiger Hinweis Nr. 1: Twitter Bootstrap gibt nur dann die width Spalten in besonders kleinen Geräten an, wenn Sie dies angeben eine der Klassen _.col-xs-#_ für die Spalten.

Aus diesem Grund habe ich in dieser speziellen Demo _.col-xs-*_ -Klassen verwendet, damit Spalten im mobilen Modus ordnungsgemäß angezeigt werden, da hier das width der Spalte explizit angegeben wird.

Sie können das Flexbox -Layout aber auch ausschalten , indem Sie in einem bestimmten Bildschirm einfach _display: flex;_ in _display: block;_ ändern Größ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 Sie könnten _.vertical-align_ nur auf bestimmten Bildschirmgrößen angeben wie folgt:

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

In diesem Fall würde ich mit @ KevinNelson 's Ansatz gehen.

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

Dies bedeutet, dass Sie im Produktionsmodus auch vom Hersteller vorangestellte Eigenschaften wie _display: -webkit-box_ usw. verwenden sollten.

Wenn Sie in Demo auf "Toggle Compiled View" klicken, sehen Sie die vorangestellte Version der CSS-Deklarationen (dank Autoprefixer) ).


Spalten mit voller Höhe und vertikal ausgerichtetem Inhalt

Wie Sie in der vorherigen Demo sehen, sind die Spalten (die flexiblen Elemente) nicht mehr so ​​hoch wie ihr Container (das flexible Containerfeld, d. H. Das _.row_ -Element).

Dies liegt daran, dass der Wert center für die Eigenschaft _align-items_ verwendet wird. Der Standardwert ist stretch, sodass die Elemente die gesamte Höhe des übergeordneten Elements ausfüllen können.

Um dies zu beheben, können Sie den Spalten auch _display: flex;_ hinzufügen:

BEISPIEL HIER (Beachten Sie auch hier 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

Farbiger Bereich zeigt die Auffüllbox der Spalten an.

Beachten Sie zu guter Letzt , dass die hier gezeigten Demos und Codefragmente Ihnen eine andere Idee vermitteln und einen modernen Ansatz zur Erreichung des Ziels bieten sollen . Beachten Sie den Abschnitt " Big Alert ", wenn Sie diesen Ansatz in Websites oder Anwendungen der realen Welt verwenden möchten.


Für weitere Informationen, einschließlich Browserunterstützung, wären diese Ressourcen hilfreich:


1. Richten Sie ein Bild in einem Div vertikal mit der Reaktionshöhe aus2. Es ist besser, eine zusätzliche Klasse zu verwenden, um die Standardeinstellung von Twitter Bootstrap _.row_ nicht zu ändern.

872
Hashem Qolami

Der folgende Code hat bei mir funktioniert:

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

Update 2018

Ich weiß, dass die ursprüngliche Frage für Bootstrap 3 war, aber jetzt, da Bootstrap 4 veröffentlicht wurde, finden Sie hier einige aktualisierte Anleitungen zur vertikalen Mitte.

Wichtig! Die vertikale Mitte ist relativ zur Höhe des Elternteils

Wenn das übergeordnete Element des Elements, das Sie zentrieren möchten, keine definierte Höhe hat, keine vertikale Zentrierung Lösungen werden funktionieren!

Bootstrap 4

Nun, da Bootstrap 4 standardmäßig eine Flexbox ist , gibt es viele verschiedene Ansätze für die vertikale Ausrichtung: automatische Ränder , flexbox utils oder display utils zusammen mit vertical align utils . "Vertical Align Utils" scheinen auf den ersten Blick offensichtlich zu sein, aber diese funktionieren nur mit Inline- und Tabellenanzeigeelementen. Hier sind einige Bootstrap 4 vertikale Zentrierungsoptionen.


1 - Vertikale Mitte mit automatischen Rändern:

Eine andere Möglichkeit zum vertikalen Zentrieren ist die Verwendung von my-auto. Dadurch wird das Element in seinem Container zentriert. Zum Beispiel macht h-100 die Zeile zur vollen Höhe, und my-auto zentriert die col-sm-12 -Spalte vertikal.

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

Bootstrap 4 - Vertikale Mitte mit automatischen Rändern Demo

my-auto repräsentiert Ränder auf der vertikalen y-Achse und entspricht:

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

2 - Vertikales Zentrum mit Flexbox:

Vertical center grid columns

Da Bootstrap 4 .row jetzt display:flex ist, können Sie align-self-center einfach für jede Spalte verwenden, um sie 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 Sie align-items-center für den gesamten .row, um alle col-* in der Zeile vertikal auszurichten ...

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

Bootstrap 4 - Vertikale mittlere Spalten unterschiedlicher Höhe Demo


3 - Vertikale Mitte mit Anzeige-Utils:

Bootstrap 4 hat Anzeige-Utils , die für display:table, display:table-cell, display:inline usw. verwendet werden können. Diese können mit vertikale Ausrichtung) verwendet werden utils zum Ausrichten von Inline-, Inline-Block- oder Tabellenzellenelementen.

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

Bootstrap 4 - Vertikale Mitte mit Hilfe der Anzeige-Tools Demo

Siehe auch: Vertical Align Center in Bootstrap 4


Bootstrap 3

Flexbox-Methode auf dem Container der zu zentrierenden Artikel:

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

26
Zim

Versuchen Sie dies im CSS des div:

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

Nach der akzeptierten Antwort funktioniert die folgende Lösung einwandfrei, wenn Sie das Markup nicht anpassen möchten, um Bedenken zu trennen oder einfach, weil Sie ein CMS verwenden:

.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 hierbei ist, dass Sie die Schriftgröße nicht vom übergeordneten Element erben können, da in der Zeile die Schriftgröße auf 0 festgelegt wird, um Leerzeichen zu entfernen.

21
Manuszep

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

Dank der Antwort von @ HashemQolami habe ich einige Medienabfragen erstellt, die mobil wie die col- * -Klassen funktionieren, damit ich die col- * für mobile Geräte stapeln, sie jedoch für größere Bildschirme vertikal in der Mitte ausrichten kann, 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, für die eine andere Anzahl von Spalten pro Bildschirmauflösung erforderlich ist (z. B. 2 Zeilen für -xs, 3 für -sm und 4 für -md usw.), erfordern etwas fortgeschritteneres Finagling, jedoch für eine einfache Seite mit -xs gestapelt und -sm und größer in Reihen, funktioniert dies gut.

20
Kevin Nelson

Ich bevorzuge diese Methode gemäß David Walsh Vertical Center CSS :

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

Das transform ist nicht wesentlich; es findet nur die Mitte etwas genauer. Internet Explorer 8 ist möglicherweise etwas weniger zentriert, aber dennoch nicht schlecht - Kann ich - Transforms 2d verwenden .

20
user1477388

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

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

Dann würde Ihr HTML so aussehen:

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>
.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>
16

Ich habe das einfach gemacht und es macht das, 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
Ryan Alexander

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

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

10
babycakes

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

Stellen Sie zunächst die Höhe Ihrer html und body Elemente auf 100% ein. Das ist wichtig! Ohne dies erben die Elemente html und body einfach die Höhe ihrer untergeordneten Elemente.

html, body {
   height: 100%;
}

Dann hatte ich eine Außencontainerklasse mit:

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

Und zum Schluss der Innencontainer 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>

Dies ist alles, was Sie zum vertikalen Ausrichten von Inhalten benötigen. Probieren Sie es in Geige:

Jsfiddle

8
Kingsley Ijomah

Es werden keine Tabellen und Tabellenzellen benötigt. Es kann leicht mit 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%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>
7
Arvind Bhardwaj

Wenn Sie die Version Less von Bootstrap verwenden und selbst in CSS kompilieren, können Sie einige Dienstprogrammklassen für Bootstrap -Klassen verwenden.

Ich habe festgestellt, dass diese hervorragend funktionieren, wenn ich die Reaktionsfähigkeit und Konfigurierbarkeit des Gittersystems Bootstrap beibehalten möchte (wie bei der Verwendung von -md oder -sm), aber ich möchte alle Spalten in einer bestimmten Reihe haben alle die gleiche vertikale Höhe (damit ich dann ihren Inhalt vertikal ausrichten kann und alle Spalten in der Reihe eine gemeinsame Mitte haben).

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:

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>
7
Gerbus

Ich habe ein wenig auf Zessxs Antwort eingegangen, um die Verwendung beim Mischen verschiedener Spaltengrößen auf verschiedenen Bildschirmgrößen zu vereinfachen.

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

Dadurch wird das folgende CSS generiert (das Sie direkt in Ihren Stylesheets verwenden können, wenn Sie Sass nicht 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 in Ihren responsiven Spalten wie folgt verwenden:

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>
6
sb.olofsson

OK, ich habe aus Versehen ein paar Lösungen gemischt und es funktioniert jetzt endlich für mein Layout, wo ich versucht habe, eine 3x3-Tabelle mit Bootstrap Spalten mit der kleinsten Auflösung zu erstellen.

/* Required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* Additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>
4

Flex-Verhalten wird von Haus aus unterstützt, seit Bootstrap 4. Fügen Sie d-flex align-items-center im div row hinzu. Sie müssen Ihren CSS-Inhalt nicht mehr ändern.

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

<!-- language: html -->
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

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

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

Quelle: Flex · Bootstrap

4
Mr. Robot
    div{
        border: 1px solid;
    }
    span{
        display: flex;
        align-items: center;
    }
    .col-5{
        width: 100px;
        height: 50px;
        float: left;
        background: red;
    }
    .col-7{
        width: 200px;
        height: 24px;

        float: left;
        background: green;
    }
    <span>
        <div class="col-5">
        </div>
        <div class="col-7"></div>
    </span>
2
Nambi N Rajan

Es gibt verschiedene Möglichkeiten:

  1. Verwenden

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

    und das CSS des Containers an

    display: table;
    
  2. Verwenden Sie die Auffüllung zusammen mit dem Medienbildschirm, um die Auffüllung im Verhältnis zur Bildschirmgröße zu ändern. Google @media-Bildschirm, um mehr zu erfahren.

  3. Verwenden Sie relative Polsterung

    D. h., Auffüllen in% angeben

1
Amaan Iqbal

Versuche dies,

.exe {
  font-size: 0;
}

.exe > [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  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>
1
core114

Mit Bootstrap 4 (derzeit in Alpha) können Sie die .align-items-center -Klasse verwenden. So können Sie den reaktionsschnellen Charakter von Bootstrap beibehalten. Funktioniert auf Anhieb gut für mich. Siehe Bootstrap 4-Dokumentation .

0
DiCaprio

HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}
0