3

h2 と p の 2 行のテキストを含む絶対配置の div がいくつかあります。私はテキストを次のように取得しようとしています:絶対に配置されたdiv内で垂直方向に中央揃えされ、右揃えで、h2タグとpタグの間に改行があります。

絶対位置の div は親に含まれているため、フレックスボックスを使用してこの問題を解決できると思っていましたが、予想以上に難しいことがわかりました。親 display: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 と組み合わせると機能しません。float:right も機能しません。

私のマークアップは次のようになります。

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

ここで、overlay は、overlay-container 内の絶対位置の div です。オーバーレイは、画像の一部の上に配置されるボックスです。上記の display:flex およびその他のプロパティは、overlay クラスにあります。

どう頑張っても、3つの条件のうち2つしか機能しないようです。フレックスボックスの使用は必須ではありませんが、テキストを垂直方向に中央揃えするのが簡単になると思いました。誰でも助けることができますか？

4

1 に答える 1

5

これは、使用して中央に配置する方法のサンプルですdisplay: flex

スタック スニペット

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

更新しました

状況によっては、代わりに自動マージンを使用する必要がある場合があります。justify-content( を使用する場合) を使用してセンタリングするときのデフォルトの動作flex-direction: columnは、コンテンツが収まらない場合、上部と下部の両方でオーバーフローするためです。

スタック スニペット

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

ここでは、真ん中に 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 -->

別のサンプル:

于 2016-04-23T07:05:14.113 に答える