CSS flexで縦位置の中央配置する

flexにalign-items: center;と書くと縦の真ん中に配置できます。
テキストが2行でも3行でも問題なく表示できます。

よくある、画像とテキストを左右に分けて、テキストを縦の中央に配置したい場合に使えます。



サンプル

html

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<div class="box"> <p class="img"><img alt="" src=""></p> <div class="box--text"> <p class="title">title</p> <p class="text">text</p> </div> </div>   <div class="box"> <p class="img"><img alt="" src=""></p> <div class="box--text"> <p class="title">title</p> <p class="text">text text</p> </div> </div>

css

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

* {   margin: 0;   padding: 0;   line-height: 1.2; } .box {   margin: 10px;   display: flex;   align-items: center; } .img {   width: 5em;   height: 5em;   margin-right: 10px;   background: #ccc; }