問題
Flexboxで要素を左右中央寄せにするには?
解決策
親要素に「align-items: center;」を設定する。
要素を左右中央寄せにする
Flexboxで要素を左右中央寄せにする方法をご紹介します。
DEMOはこちら
アイテム
アイテム
親要素に「align-items: center;」を設定する
親要素に「align-items: center;」を設定することで、子要素を左右中央寄せにすることができます。
HTML
<div class="flex-acenter">
<p class="item">アイテム</p>
<p class="item">アイテム</p>
</div>
CSS
.flex-acenter{
display: flex;
align-items: center;
}
.flex-acenter .item{
margin-right: 10px;
padding: 10px;
text-align: center;
background-color: #FCECE8;
flex-grow: 1;
}
.flex-acenter .item:last-child{
margin-right: 0;
}
コメント