CSS〜縦横中央配置の方法〜
2023.06.05
スタッフブログ
こんにちは。DICTUXの新入社員です。
今日は、CSSで「画像や文字を縦横中央配置する方法」について共有しようと思います。
縦横中央配置する方法は色々ありますが、今日はその中で「display:flex;」を使った方法を一つ紹介しようと思います。
例：HTML
<div>
<img src="mati/img.jpg" alt="もち">
<p>;もち</p>
</div>
例：CSS
div{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
簡単に解説をすると、
親要素に「display: flex;」「align-items: center;」「justify-content: center;」「text-align: center;」をいれていて、
「align-items: center;」「justify-content: center;」「text-align: center;」が中央配置の役割を果たしてくれています。
だいたいこれでうまく配置されます。うまく配置されないときは親要素の高さを決めてあげるとうまくいくと思います。
これを打ち込むだけで解決するので「margin: 0 auto」が効かないときには便利ですし、何より手っ取り早いと私は思います。
実はこれ、chatGPTが教えてくれた方法です！
chatGPTに聞くまでずっと頭を悩ませていたのに一瞬で解決しました…
もっと早く頼るべきでした…
本当に便利ですよね〜…助かってます…！