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

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

/* Erforderliche Stile */

#grid a {
  display: table;
}

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

/* Zusätzliche Stile für Demozwecke: */

body {
  padding: 20px;
}

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

a > div {
  width: 100%;
  text-align: center;
}

    1

    2

    3

    4

    5

    6

    7

    8

    9

Answer 2

Für die neueste Version von Bootstrap können Sie align-items-center verwenden. Verwenden Sie die align-items-Utilitys auf Flexbox-Containern, um die Ausrichtung von Flex-Elementen auf der Querachse (die y-Achse zum Starten, x-Achse, wenn flex-direction: column) zu ändern. Wählen Sie zwischen Start, Ende, Mitte, Grundlinie oder Streckung (Browserstandard).

    ...

Answer 3

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

Answer 4

Es gibt verschiedene Möglichkeiten, wie du es tun kannst:

1. Verwende

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

   und das CSS des Containers, um

   display: table;

2. Verwende Padding zusammen mit media-screen, um das Padding relativ zur Bildschirmgröße zu ändern. Suche nach @media screen bei Google, um mehr zu erfahren.

3. Verwende relatives Padding

   Das heißt, gib das Padding in % an

Answer 5

Versuchen Sie dies,

.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}

      Groß

       Klein