問題 × 解決策

Flexboxで要素を左右中央寄せにする方法

問題

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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

five × three =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧