Vertically Mitte, rechts ausrichten, mehrzeiligen Text in absolut positioniert div mit FlexBox Mutter

Question

I ein einige absolut positioniert divs mit zwei Zeilen Text, einem h2 und einer p haben. Ich versuche, den Text zu erhalten: zentriert vertikal innerhalb des absolut positionierten div, rechts ausgerichtet, und es gibt einen Zeilensprung zwischen dem h2 und p tag.

Die absolut positionierte divs innerhalb eines übergeordneten enthalten sind, so dachte ich, ich Flexbox dieses Problem zu lösen verwenden könnte, aber stellt sich heraus, es ist schwieriger als erwartet. Ich habe die Elternanzeige angegeben: flex und align-items: center, die sie vertikal zentriert. Aber dann sind meine h2 und p in der gleichen Zeile, es gibt keinen Zeilenumbruch.

So dann habe ich flex-Richtung: Spalte, die einen Zeilenumbruch erstellt, aber dann wird der Text nicht mehr vertikal zentriert. Wenn ich align-items benutze: flex-end und flex-direction: column wird der Text rechts ausgerichtet und es gibt einen Zeilenumbruch zwischen h2 und p, aber dann sind sie nicht vertikal zentriert.

margin-right: auto kann angeblich richtigen Artikel ausrichten, aber kombiniert mit align-Artikel: center und flex-Richtung: Spalte, funktioniert es nicht. float: right funktioniert auch nicht.

Meine Markup sieht wie folgt aus:

<div class = "col-sm-12"> 
     <div class = "row overlay-container"> 
     <img src = "_img/top-right@4x.png" class = "img-responsive grid-image" alt = "top-right@4x image" /> 
      <div class = "overlay overlay-2"> 
      <h2>Recent Work</h2> 
      <p>Lorem ipsum dolor</p> 
     </div> <!-- /overlay --> 
     </div> <!-- /row --> 
    </div> <!-- /top right --> 

wo Overlay ist die absolut innerhalb des Overlay-Behälter positioniert div. Die Überlagerung ist eine Box, die über einem Teil des Bildes positioniert ist. Die Anzeige: flex und andere oben erwähnte Eigenschaften befinden sich in der Overlay-Klasse.

Es scheint, dass egal, was ich versuche, ich nur zwei der drei Bedingungen erhalten können zu arbeiten. Die Verwendung von Flexbox ist keine Voraussetzung, aber ich dachte, es würde es leicht machen, den Text vertikal zu zentrieren. Kann jemand helfen?

Answer 1

Hier ist ein Beispiel, wie display: flex

Stapel

body { 
 
    margin: 0; 
 
} 
 
.overlay { 
 
    width: 300px; 
 
    margin-top: 5vh; 
 
    height: 90vh; 
 
    border: 1px solid; 
 
    
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<div class = "overlay overlay-2"> 
 
    <h2>Recent Work</h2> 
 
    <p>Lorem ipsum dolor</p> 
 
</div> <!-- /overlay -->

---

Aktualisiert

In einigen Situationen Schnipsel mit zum Zentrum ein Auto margi verwenden müssen möglicherweise n ist stattdessen als Standardverhalten, wenn sie mit justify-content Zentrieren (bei Verwendung von flex-direction: column) ist, wenn der Inhalt nicht paßt, wird es sowohl Überlauf am oberen und unteren Rand.

• https://www.w3.org/TR/css-flexbox-1/#valdef-justify-content-center

Stapel Snippet

body { 
 
    margin: 0; 
 
} 
 
.overlay { 
 
    width: 300px; 
 
    margin-top: 5vh; 
 
    height: 90vh; 
 
    border: 1px solid; 
 
    
 
    display: flex; 
 
    flex-direction: column; 
 
    /*justify-content: center;  removed */ 
 
    align-items: center; 
 
    overflow: auto;    /* scroll when overflowed */ 
 
} 
 

 
.overlay h2 { 
 
    margin-top: auto;    /* push to the bottom */ 
 
} 
 
.overlay p { 
 
    margin-bottom: auto;   /* push to the top */ 
 
}

<div class = "overlay overlay-2"> 
 
    <h2>Recent Work</h2> 
 
    <p>Lorem ipsum dolor</p> 
 
</div> <!-- /overlay -->

---

2 Aktualisiert

Hier mit einem dritten Punkt in der Mitte, was wird scrollen wenn nicht passt.

Stapel Snippet

body { 
 
    margin: 0; 
 
} 
 
.overlay { 
 
    width: 300px; 
 
    margin-top: 5vh; 
 
    height: 90vh; 
 
    border: 1px solid; 
 
    
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
.overlay p:first-of-type { 
 
    overflow: auto;    /* scroll when overflowed */ 
 
} 
 

 
.overlay h2 { 
 
    margin-top: auto;    /* push to the bottom */ 
 
} 
 
.overlay p:last-of-type { 
 
    margin-bottom: auto;   /* push to the top */ 
 
}

<div class = "overlay overlay-2"> 
 
    <h2>Recent Work</h2> 
 
    <p> 
 
    Lorem ipsum dolor<br> 
 
    Lorem ipsum dolor<br> 
 
    Lorem ipsum dolor<br> 
 
    Lorem ipsum dolor<br> 
 
    Lorem ipsum dolor<br> 
 
    Lorem ipsum dolor<br> 
 
    Lorem ipsum dolor<br> 
 
    </p> 
 
    <p>Maybe a link for more</p> 
 
</div> <!-- /overlay -->

---

Ein weiteres Beispiel:

• How to fix height the content inside a div with flex css