同じ行に「中央寄せ」と「右寄せ(左寄せ)」を両立させるCSS

こんにちは、クロコロールの熊田です。

今日は、実際の案件で使ったCSSテクニックを紹介します。
タイトルを見て何言ってんだと思った方もいるかもしれませんが要は2つの子要素を上の画像のように一つは中央寄せ、もう一つは片側に寄せたいという話です。

「左寄せ」と「右寄せ」なら…

ソース

HTML

floatの場合

flexboxの場合

表示

左寄せ
右寄せ

よくあるパターンですね。

じゃあ片方を中央寄せしたい時はどうするべきか。
floatにはcenterなんて無いし…

「中央寄せ」と「右寄せ」なら…

どうするかというと「flexbox」と「position」の併せ技です。

ソース

HTML

CSS

表示

中央寄せ
右寄せ

親要素に justify-content: center; を指定して子要素を中央揃えにし、片側に寄せたい子要素を position で位置を指定するだけです。
左寄せにするなら right ではなく left: 0; と指定するだけですね。

まとめ

floatとpositionでもできるかもしれませんがレスポンシブデザインを踏まえるとflexboxの方が融通が効きますし記述もシンプルでいいと思います。
今後も実戦で使ってみたCSSを紹介していきます。

それではまた次回。

The following two tabs change content below.

熊田 賢太郎

株式会社クロコロールで主にコーディングを担当しています。
内容がよかったら、シェアをお願いします!
一覧へ戻る

INSTAGRAM

OFFICIAL LINE ACCOUNT

FACEBOOK