画像上の文章の位置を画像の真ん中あたりにしたいです。

本題
画像上の文章の位置を画像の真ん中あたりにしたいです。

HTMLとcssででカフェ風サイトを作っています。
画像の上文字を、画像の真ん中あたりにしたいです。
また、文字全体が画像の伸縮に伴い求めてもないのに位置が移動します。
動かなくていいので、動かないように設定したいです。
参考までにコードを添付します。
またコーディングにアドバイスがあればいただけると嬉しいです。

<html　lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="author" content="Cafe　hamuchi">
  <meta name="description" content="自然派カフェ">
  <meta name="viewport" content="width=device-width,  initial-scale=1.0">
  <title>Cafe Hamuchi</title>
  <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300&display=swap" rel="stylesheet">
  <link href="style.css" rel="stylesheet" media="all">

<body>
  <div class="wrapper">
    <header class="headerWrap">
      <h1>Cafe Hamuchi</h1>
    </header>
    <aside>
      <nav role="navigation" class="naviWrap">
        <ul>
          <li><a href="index.html">TOP</a></li>
          <li><a href="concept.html">CONCEPT</a></li>
          <li><a href="menu.html">MENU</a></li>
          <li><a href="map.html">MAP</a></li>
        </ul>
      </nav>
    </aside>
    <div id="content">
        <h1 class="title">おすすめメニュー</h1>
      <osusume role="gohan" class="gohan1">
        <dl class="coffee">
          <dt>はむちブレンド</dt>
          <dd class="pict"><img src="images/商品２.jpg" width="150" height="150" alt="コーヒー"></dd>
          <dd class="text">当店の看板メニュー<br>
            こだわり豆を使用した爽やかな酸味<br>
              深い味わいを持った当店の人気商品です</p>
          </dd>
        </dl>
        <dl class="cappuccino">
          <dt>カプチーノ</dt>
          <dd class="pict"><img src="images/商品１.jpg" width="150" height="150" alt="カプチーノ"></dd>
          <dd class="text">
            <p>こだわりのコーヒー豆と口当たりのいい<br>
              ふわふわミルクが味わえる一品です</p>
          </dd>
        </dl>
        <dl class="French toast">
          <dt>フレンチトースト</dt>
          <dd><img src="images/商品3.jpg" width="150" height="150" alt="フレンチトースト"></dd>
          <dd class="text">
            <p>外はカリッと、中はふわっとした<br>
              程よい甘さでランチにも<br>
              カフェタイムにもぴったりです</p>
          </dd>
        </dl>
      </osusume>
      <osusume2 role="gohan" class="gohan2">
        <dl class="French toast">
          <dt>パンケーキ</dt>
          <dd><img src="images/商品4.jpg" width="150" height="150" alt="パンケーキ"></dd>
          <dd class="text">
            <p>ゆっくりと焼き上げたふっくら<br>
              ふわふわパンケーキ。シロップと<br>相性バッチリです</p>
          </dd>
        </dl>
        <dl class="pasta">
          <dt>生ハムパスタ</dt>
          <dd><img src="images/商品5.jpg" width="150" height="150" alt="生ハムパスタ"></dd>
          <dd class="text">
            <p>塩味のきいたおいしい生ハム<br>
              トマトの酸味とぴったり合った一品です</p>
          </dd>
        </dl>
        <dl class="desert">
          <dt>デザートプレート</dt>
          <dd><img src="images/商品6.jpg" width="150" height="150" alt="デザートプレート"></dd>
          <dd class="text">
            <p>当店で焼き上げたずっしりとした<br>
              濃厚なガトーショコラとフレッシュな<br>
              牛乳を使用したバニラアイスが楽しめる品です</p>
          </dd>
        </dl>
      </osusume2>
    </div>
    <footer class="footer1">
      <p>Copyright 2020 Cafe Hamuchi.</p>
    </footer>
  </div>
</body>

</html>

↓ CSS
.title{
position: absolute;
top: 200px;
margin-left: 50%;
margin-right: -50%;
}

.gohan1, .gohan2 {
  display: flex;
}

  .gohan1 dt, .gohan2 dt{
  text-align: center;
}
.gohan1{
  margin-left: 350px;
  margin-top: 270px;
}
.gohan2{
  margin-left: 350px;
}

.pasta{
margin-left:55px;}

.desert{
margin-left:10px;
}
コード

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLコードを見ると画像の幅は150px固定のようなので、画像の上のテキストのブロックの幅も150pxにすればいいでしょう。

css
1.gohan1 dt, .gohan2 dt{
2  text-align: center;
3  width: 150px; /* 追加 */
4}

投稿2020/10/28 14:22

hatena19

総合スコア33784

Rchan

2020/10/31 12:46

助かりました！ご親切にありがとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

画像上の文章の位置を画像の真ん中あたりにしたいです。

関連した質問