画像の下に配置する文章を、画像の横幅と同じ長さで改行を加えたいです。

Question

前提・実現したいこと

画像の下に配置する文章を、画像の横幅と同じ長さで改行を加えたいです。

発生している問題・エラーメッセージ

画像の下に配置したい文章が長文なため、文章が適切な位置（画像と同じ幅の位置）で改行されずに画面の横いっぱいまで文字が並んでしまいます。

該当のソースコード

<div class ="contents">
  <div class="picture">
     <img src ="image/画像1.jpg" width="297" height="198">
     <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>

    <div class="picture">
     <img src ="image/画像2.jpg" width="297" height="198">
     <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>

    <div class="picture">
     <img src ="image/画像3.jpg" width="297" height="198">
     <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>
  </div>

.picture{
  display: inline-block;
  padding:  20px;
  height: 100px;

}

.contents{
  text-align:center;
}

試したこと

<br>を使い、一つ一つ文字を確認して改行した

<p>に対して幅を指定した。

Answer 1

書き換えが必要になるけど、自分ならこんな感じにしちゃいます。

<div class="picture">
  <dl>
    <dt><img></dt>
    <dd>説明文章</dd>
  </dl>
</div>

.picture dl {
  max-width:297px;
}

もっと言うと、.pictureは同じフォーマットが並んでいるので、リストにするのが
より正しいと思います。

Comments

[NEMOTOSHOTA]

回答ありがとうございます。

上記の通りdlタグを使って書き換えをし、ddタグにもmarginを使って中央添えにしたところ

.picture dd {
margin:0 auto;

イメージしていた通りに画像下に中央添えで表示されるようになりました。

助かりました。

[LibertyBell3]

解決してなによりです。