行数が異なるテキストの高さを縦センター寄りにする方法
こんにちは。今日は「行数が異なるテキストの高さを縦センター寄りにする方法」について書きます!
イメージはこんな感じです↓
ではさっそくコードを見ていきましょう〜!
コード
HTML編
<div class="listBlock"> <ul class="itemList"> <li> <div class="liInner"> <p class="tit"><span>テキストが入ります<br>テキストが入ります</span></p> </div> </li> <li> <div class="liInner"> <p class="tit"><span>テキストが入ります</span></p> </div> </li> <li> <div class="liInner"> <p class="tit"><span>テキストが入ります</span></p> </div> </li> <li> <div class="liInner"> <p class="tit"><span>テキストが入ります<br>テキストが入ります<br>テキストが入ります</span></p> </div> </li> </ul> </div>
CSS編
.listBlock .itemList { display: flex; flex-wrap: wrap; margin: 0 -20px; } .listBlock .itemList > li { width: 25%; padding: 0 20px; box-sizing: border-box; text-align: center; } .listBlock .itemList .liInner { height: 100%; //箱の高さ合わせる box-sizing: border-box; //箱の高さ合わせる background-color: #b9e3f9; padding: 35px 15px; } .listBlock .itemList .tit { display: flex; align-items: center; justify-content: center; font-weight: bold; line-height: 1.4; font-size: 1.6rem; min-height: calc(2 * 1.4em); //ポイント }
ちなみに、ブラウザ上で4つ並べてみたらこんな感じです↓
ちなみに背景を見てもらうとわかるのですが、箱自体の高さも合わせています。
簡単に説明しますね^^
1.まず、【.tit】の高さを最低2文字分、と指定する
ポイントは【.tit】に指定している【min-height: calc(2 * 1.4em);】です!
(2 * 1.4em)部分はどういう計算なのかというと、1emは1文字の高さですが行間分(line-height: 1.4;)を考慮し結果1文字分を1.4emとしています。
そして今回は最低2行分の高さにしたいので2を掛けています。
そして今回は最低2行分の高さにしたいので2を掛けています。
2.【.tit】の縦軸をセンター寄りにする
【.tit】にflexを指定し、縦横センター寄りの設定にします。
この時テキストを<span>で囲っておくと中身が横並びにならずに済みます^^←何気に重要!
この2点を押さえておけば応用も効くと思います!
では今日はここまで〜〜
コメント