Vertikal zentrieren von text innerhalb flexbox-Element

Möchte ich die flex-items in voller Höhe, aber der Inhalt in Ihnen werden vertikal zentriert.

justify-content: centre funktioniert nicht, und align-self: centre auf das Element selbst schrumpft in seiner Höhe zu seinen eigenen Inhalten, während ich möchte, dass alle Elemente die gleiche Höhe.

In diesem Beispiel möchte ich die zahlen werden vertikal zentriert: http://codepen.io/ilyador/pen/ogYbWO?editors=110

CSS:

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;  
}

.flex-item {
  flex: 1 1;
  background: tomato;
  padding: 5px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  border: solid 1px red;
}

HTML:

<ul class="flex-container">
  <li class="flex-item">1fbdms s s sdj dfkg kjfg dkfj gdfjkgdfkj gdfkjg dfkjgdkhdfjk gkjdfkjdfgdfg jkdfgdfjkgk </li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

  • Frage nur...warum müssen Sie die Elemente an, die haben 100% Höhe?
  • Ich brauche alle Objekte auf die gleiche Höhe wie die höchste
  • Warum Sie brauchen Sie, um die gleiche Höhe wie die höchsten? Sie zentrieren möchten Sie - nicht Sie?
  • Was meinst du?
  • So etwas wie dieses: codepen.io/danield770/pen/ByQjJL
  • Danke, aber Nein, brauche ich jeden einzelnen seiner eigenen hintergrund.
  • Ok, das ist, was ich Fragen, alle zusammen.... Sie müssen die Elemente zu nehmen, 100% Höhe, weil jeder auf e hat Ihren eigenen hintergrund.
  • Sie müssen zum verwenden von geschachtelten flexboxes: stackoverflow.com/a/32828900/3597276
  • das ist das, was ich hoffte, zu vermeiden, aber anscheinend konnte nicht... Tabelle-Zellen sind viel einfacher, auf diese Weise
  • verschachteln von flex-Containern ist nicht wirklich eine große Sache. Und Sie behalten die Fähigkeit, verwenden Sie die flex-Eigenschaften, die flexibler als Tabellen.
  • oh, scheint, dass ich falsch war — Sie müssen nur display: flex auf innere Elemente zu zentrieren, Ihr Inhalt, sondern in Ihnen müssen Sie nicht hinzufügen zusätzliche innere wrapper-element mit display: flex nur um eine Zentrierung, wie ich ursprünglich dachte. In anderen Worten, Sie haben immer ein element zu setzen display: flex auf
  • sind Sie richtig. Sie müssen nicht fügen Sie einen wrapper, um den Inhalt, denn CSS automatisch erstellt anonym-Boxen. Für mehr details über das zentrieren den Inhalt einer flex-Element finden Sie unter hier und hier. Prost!

InformationsquelleAutor ilyo | 2015-01-01
  1. 11

    War ich in der Lage zu erreichen, vertikale Zentrierung Ihrer zahlen mit dieser:

    .flex-item {
  display:flex;
  flex-direction:column;
  justify-content:space-around;
}

    Wenn Sie wollen, dass etwas vertikal zentriert werden, setzen Sie den container auf display:flex und verwenden Sie dann justify-content um es zu erreichen. Mit justify-content Sie können entweder legen Sie es auf space-around oder zu center. Entweder werden Sie Ihr Ziel erreichen.

    http://codepen.io/anon/pen/RNoajg

    • Dies ist eine gute Antwort. Nur ein Hinweis: dies funktioniert nicht für IE 10 und niedriger.
    • funktioniert nicht mit IE10 oder niedriger. also... ich bin in Ordnung damit. caniuse.com/#search=flexbox
    InformationsquelleAutor paceaux
  2. 6

    Geben die flex-items display: flex und align-items: center. Die flex-items, wird der Inhalt nun vertikal zentriert.

    CSS:

    body {
  display: flex;
  height: 100vh;
  margin: 0;
}
body > div {
  flex: 1;
  display: flex;
  align-items: center;
  background: #F00;
}
body > div:nth-child(odd) {
  background: #F90;
}

    HTML:

    <div>
  <p>This</p>
</div>
<div>
  <p>text</p>
</div>
<div>
  <p>is</p>
</div>
<div>
  <p>vertically</p>
</div>
<div>
  <p>centered</p>
</div>

    InformationsquelleAutor misterManSam
Schreibe einen Kommentar