【初心者向け】要素をど真ん中に置く方法

おはようございます。ニラです。

最近やっているチーム制作を通して、発想力が足りないということを改めて自覚しました。

面白い作品を作りたいな〜

ど真ん中にある要素とは？

例えば、、、

こんな風に、メインビジュアルのど真ん中にロゴがあったり、、

こんな感じで、何かしらのグループの真ん中に文字があったり。

このように、いろんなところで要素のど真ん中配置が施されていると思います。

いやpaddingを上と下、左と右で一緒にすればいいやん？まぁ、それで解決するパターンもありますが、上の4枚の画像は、paddingではちゃんと解決されません。

では、解説していきましょう。

まずは、ど真ん中配置のデザインをしよう

とりあえず、中央配置を使ったテキトーに作ったデザインをコーディングしていきましょう。

一番下の黒いところは、基本無視で。

HTMLだけ組みました。こんな感じですかね。

デカい文字は、面倒だったので画像にしちゃいました。

See the Pen Untitled by horii kouta (@nira12) on CodePen.

コードは、こんな感じです。Resultで画像が表示されないのは、一旦スルーしてください。

ど真ん中配置は、display: flexにしよう

header

ど真ん中にする直前のコードです。

ど真ん中にするには、ど真ん中にしたい要素の親要素（.header__inner）にdisplay: flexを設定しましょう。

設定するプロパティ

display:flex;
justify-content: center
align-items: center

ど真ん中になりましたね。

間違えやすいのは、display:flexをど真ん中にしたい要素そのものにつけてしまうことです。

気持ちはわかりますが、その親要素に設定してあげましょう。

main

これも、ど真ん中配置する直前まで、組んでみました。

See the Pen Untitled by horii kouta (@nira12) on CodePen.

CSSは、こんな感じです。

See the Pen Untitled by horii kouta (@nira12) on CodePen.

参照しやすいように、HTMLをもう一度載せます。

「READ MORE」をど真ん中にしたいです。

先ほど言ったように、ど真ん中にするには、ど真ん中にしたい要素の親要素に、display: flex; を仕掛ける必要があります。このコードで言うと、、

.news__link-boxですねぇ。

簡単でしょう？

ネットのどっかでみましたが、flexは、すべてを解決するという言葉があるようです。

このど真ん中配置も、その一つかもしれませんね。

❤︎

2022/09/18

nira-012.mahora94

◀︎

next...

prev...

▶︎

comment

fill out コメントをキャンセル

Artist

nira-012.mahora94

よろしくお願いします