未分類

text-aligin:centerは、画像を真ん中にできない!タグの使い方を理解しながら学ぼう

コーディングをしていて、なぜ効かないんだろうと悩んで半日潰したのでここにメモを残します。

text-aligin:centerは文字を真ん中にしたいときに使うもので、<img>に対して使ってもそりゃ効果がないよということでした。
かなり初歩的な内容ですが。。。汗

では、<img>を真ん中にするには?

おお、なるほど、、という裏技を見つけまして、それは<p>タグで囲む。

<p>
<img src=”img/demodemo.img”>
</p>
 

という感じです。シンプル。
この書き方じゃなくても他にいろんな方法があるので、いろいろみてみるといいかなと思います。
正解は一つじゃないです。

もっと詳しい説明はHTMLのリファレンスで書かれています。

このタグtext-aligin:centerを使えば、真ん中にできるという認識だというふうに理解したつもりでいると、どこかで必ずつまずいてしまいます。

心が折れそうになったけど、このタグはどの要素に対して使えるか?を含めてしっかり確認するようにしようと意識付けができました。

独学だと、自分一人で解決までたどり着けるのに大変で、時間が多く失ってしまうけど、
その分得るものは身に沁みるようなる。。。と前向きに捉えておきます笑