問題
flexboxで要素の高さを揃えた上で上下中央揃えにするには？
解決策
親要素に「display: flex;」を設定した上で、子要素にもそれぞれ「display: flex;」を設定し、さらに「align-items: center;」を設定します。
flexboxによる、要素を揃える手法
flexboxで要素の高さを揃えた上で上下中央揃えにする方法をご紹介します。
DEMOはこちら
-
テキスト
-
テキスト
テキスト
テキスト -
テキスト
HTMLはこちら
<ul class="lt_align-list">
<li><p>テキスト</p></li>
<li><p>テキスト<br>テキスト<br>テキスト</p></li>
<li><p>テキスト</p></li>
</ul>CSSはこちら
.lt_align-list{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.lt_align-list > li{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
padding: 20px;
width: 33%;
border: 1px solid #ffffff;
background-color: #fef5f2;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}ポイント!
- 親要素だけでなく、子要素にもそれぞれ「display: flex;」を設定します。
- さらにそれぞれの子要素に「align-items: center;」を設定します。
参照
以下のサイトが、より詳しく解説してくれています。
【flexboxで要素の高さを揃えつつ上下中央にする方法（IE10対応） – Qiita】
https://qiita.com/atayim/items/4f364d28ca90d10710e7
コメント