フレックスボックスの親と一緒に配置された、絶対配置されたdiv内の複数行のテキストを中心に、右揃え

Question

2行のテキスト、h2とpを持つ絶対的に配置されたdivがあります。私は、テキストを取得しようとしています：絶対配置されたdiv内で垂直方向にセンタリングされ、右揃えになり、h2タグとpタグの間に改行があります。

絶対に配置されたdivは親に含まれているので、私はflexboxを使ってこの問題を解決できると思っていましたが、それは予想以上に困難でした。私は親の表示を与えました：flexとalign-items：centerを垂直に配置します。しかし、私のh2とpは同じ行にあります。改行はありません。

次に、折れ線を作成したflex-direction：columnを使用しましたが、テキストはもはや垂直方向にセンタリングされません。 align-items：flex-endとflex-direction：columnを使用すると、テキストは右揃えになり、h2とpの間に改行がありますが、垂直方向にセンタリングされません。

margin-right：autoはアイテムを右揃えにすることができますが、align-items：centerとflex-direction：columnと組み合わせると機能しません。浮動小数点：右も動作しません。オーバーレイは、オーバーレイ・コンテナ内の絶対位置div要素である

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

：

私のマークアップはこのようになります。オーバーレイは、画像の一部に配置されたボックスです。 display：上記のフレックスやその他のプロパティは、オーバーレイクラスにあります。

私は何を試しても、私は3つの条件のうち2つを働かせることしかできないようです。フレックスボックスの使用は必須ではありませんが、テキストを垂直方向にセンタリングするのが簡単になると思いました。誰も助けることができますか？

Answer 1

ここ

は、スタックは1が自動マルギを使用する必要がありますいくつかの状況で

を更新しました

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

---

スニペットdisplay: flex

を使用してセンタリングする方法のサンプルですnの代わりに、justify-content（flex-direction: columnを使用している場合）を中心とする場合のデフォルトの動作は、コンテンツが収まらない場合、上部と下部の両方でオーバーフローします。

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

スタックは2

を更新しました

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

---

スニペット

ここでは3番目の項目が中央にあり、適合しない場合はスクロールします。

スタックは

---

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

スニペット別のサンプル：

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