wake-up-neo.com

So zentrieren Sie den Inhalt eines Flexboxelements vertikal

Ich versuche, den INHALT eines Flexbox-Elements während der Verwendung von justify-content:stretch; zu zentrieren. Es scheint, dass der alte Trick der Verwendung von display:table-cell;vertical-align:middle; in dieser Situation nicht funktioniert. Was macht?

.flex-container {
    display:flex;
    align-items:center;
    justify-content:stretch;
}
.flex-item {
    align-self:stretch;
}

<div class="flex-container">
    <div class="flex-item">I want to be vertically centered! But I'm not.</div>
</div>

VOR DER ANTWORT: Es scheint viel Verwirrung darüber zu geben, was ich frage. Ich versuche denINHALTdes Flex-Items zu zentrieren. Mit justify-content:stretch wird die Höhe des Artikels auf die volle Höhe des Containers ausgedehnt, aber der Inhalt des Artikels wird nach oben verschoben (zumindest in Chrome).

"Ein Bild sagt mehr als tausend Worte." (A) habe ich schon. (B) ist was ich will .enter image description here

23
emersonthis

Dies kann durch displaying jedes Flex-Elements als flex-Container und anschließendes vertikales Ausrichten des Inhalts mit der align-items-Eigenschaft erreicht werden:

.flex-container {
  display:flex;
  align-items:center;
  height: 200px; /* for demo */
}

.flex-item {
  align-self:stretch;
  display:flex;
  align-items:center;
  background-color: gold; /* for demo */
}
<div class="flex-container">
    <div class="flex-item">
      I want to be vertically centered!
      <s>But I'm not.</s>
  </div>
</div>

Wenn Sie die align-items:center;-Deklaration von .flex-container weglassen, können Sie align-self:stretch; auch aus flex-Elementen entfernen.

55
Hashem Qolami

Ich bin nicht sicher, ob ich Ihre Anfrage richtig interpretiere, aber ich denke, Sie versuchen "justify-content: stretch;" Wenn Sie Flex-Grow verwenden sollten.

Im meiner Probe verwendete ich flex: 1 auto; Das ist nur eine Abkürzung, um ein paar Flex-Eigenschaften einzustellen.

HTML:

<div class="flex-container">
    <div class="flex-item">I'm top dog!
    </div>
    <div class="flex-item flex-center">
        I want to be vertically centered! And I am!
    </div>
</div>

CSS:

*{
    box-sizing:border-box;
    padding:5px;
}
.flex-container {
    border: 1px solid;
    display:flex;
    align-items:center;
    height: 100px;
}
.flex-item {
    flex: 1 auto;
    border: 1px solid green;
    height:100%;
    display:flex;
    justify-content:center;
}
.flex-center {
    align-items: center;
}

http://jsfiddle.net/p28tjskq/

Flex-Eigenschaft:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex

0
chris