【HTML&CSS】imgにtext-align:center;を効かせる方法！【超簡単】

皆さんこんにちは！kwです。

今回は、HTML,CSSを勉強していく上で必ずと言ってもいいほど全員が直面する

『imgにtext-align:center;が効かない！』という問題についての対処法を解説していきます。

おそらく、この問題に直面した方は、以下のようなコードになっていると思われます。

See the Pen Untitled by kw (@kw-webd) on CodePen.

このコードは、スペルミスも無く、CSSの読み込みもうまくいっています。

なのになぜかtext-align:center;が効いていません。

このような場合、どうすればよいのでしょうか？

imgにtext-align:center;を効かせるには親要素にtext-align:center;を適用することです。

いきなり親要素といわれてもパッと来ない人が多いと思うので皆さんの知っているであろう要素で例えます。

皆さんは<div>という要素をご存じでしょうか？

そうです。imgにtext-align:center;を効かせるには<div>を使うんです。

もう少し具体的に説明すると、<div>要素で<img>要素を囲ってあげればいいんです。

容器に入ってるものが動かないとき、容器ごと移動させるというようなイメージで考えると<div>で囲う意味がなんとなく分かってきますよね。

要はそれと同じです。

では、今覚えたことを踏まえて、先ほどのコードを改善してみましょう。

See the Pen Untitled by kw (@kw-webd) on CodePen.

はい。御覧の通り中央寄せになっていますね。

この画像を中央寄せにする技術は割と多用するので是非、この機会に覚えちゃってください！

ということで今回は、imgにtext-align:center;を効かせる方法について解説しました。

他のサイトを見ているとディスプレイに関しての説明など初心者の方には理解が難しい単語が多く使われていたため私が簡潔に皆さんに解説しました。

余裕がある方はディスプレイについての理解を深めることを推奨します！

これを覚えておくと、デザインの幅が大きく広がるため、皆さんも是非使ってみてください！