質問: ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/f2a2a88d4b57cdbeeee86acc4673ec75.jpeg) ### 前提・実現したいこと html,css初心者です。 htmlで画像の下に文字を配置して、文字を画像に対して中央揃えにしたいです。 ### 該当のソースコード 文字文字文字 ### 試したこと #box1 {text-align: center;} で中央寄せをしてみたのですが、一応中央揃えはできるのですが、pc画面全体に対して中央になってしまいます。 画像に対しての文字のみ中央揃えにして、pc全体に対しては左揃えで配置したいです。 ### 補足情報 わかりにくい説明で申し訳ありませんが、ぜひ教えていただけると助かります。 よろしくお願い致します。
回答: divは横幅を指定しないと、画面一杯までエリアを広げるボックスです。 もしレイアウトでよくわからなくなったら .border{ border:1px solid #000; } を作ってはめ込んでみて視覚的に確認することをお勧めします。 (自分が下手くそなのでよく使います。 もし画像の横幅が決まっているのなら、その外側のdivを同じ幅にしましょう。 画像の横幅が200pxの時 ``` .box1{ width:200px; text-align:center; } ``` すると、なにも指定していない画像は自身のサイズを超えない範囲で横幅いっぱいに広がろうとします(もし画像の横幅が100pxなら、そこまで)。 結果として、 ・横幅200pxのdivに ・横幅200pxに広がった画像 ・divの中央に配置された文字(=これが画像の下中央となっているように見える が得られます。