文字を画像の中央に重ねることができない。

Question

前提

progateのレッスンで、ウェブページを作っています。
見本通りに画像と文字を重ねることができません。

実現したいこと

画像上段は、自分が作っているページです。
下段が、見本になります。
４つの画像の中央に、それぞれ文字を重ねたいです。

該当のソースコード

<section class="second-wrapper">
    <div class="container">
    <h2>Learn Where to Get Started!</h2>
   
<div class="lesson">
      <figure>
        <img class="icon" src="https://prog-8.com/images/html/advanced/html.png">
             <p class="name">HTML & CSS</p>
          <figcaption class="icon-directon">
              ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。
          </figcaption>
     </figure>
     
      <figure>
         <img class="icon" src="https://prog-8.com/images/html/advanced/jQuery.png">
              <p class="name">jQuery</p>
      
      <figcaption class="icon-directon">
        素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。
      </figcaption>
      </figure>
      
       <figure>
         <img class="icon" src="https://prog-8.com/images/html/advanced/ruby.png">
        <p class="name">Ruby</p>
 
      <figcaption class="icon-directon">
       オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。
     </figcaption>
      </figure>
     
      <figure>
         <img class="icon" src="https://prog-8.com/images/html/advanced/php.png">
        <p class="name">PHP</p>
      
      <figcaption class="icon-directon">
        HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。
      </figcaption>
   </figure>
   
   </div>
   </div>
  </section>
  

/* CSSのリセット（消さないでください） */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

/* ここからCSSを書いていきましょう */

.second-wrapper {
  background-color: #f7f7f7;
  height: 580px;
}

.container {
    width: 1170px;
    margin: 0 auto;
 }

h2 {
 text-align: center;
 color: #5f5d60;
 font-weight: normal;
 padding: 80px 0 50px 0;
}

.lesson {
  display: flex;
  width: 100%;
  
}

figure {
  width: 80%;
  position: relative;
  
}

figcaption {
  padding-top: 15px;
}

.icon {
 
}

.name {
  /*color: white;*/
 position: absolute;
 top: 90px;
}

.icon-directon {
  color: #b3aeb5;
  font-size: 13px;
  padding-top: 15px;
}

試したこと

.name に　right: を設定してみましたが、うまく中央に揃えることができませんでした。

補足情報（FW/ツールのバージョンなど）

「基準としたい親要素にposition: relative;と指定すると、その要素の左上部分が基準位置となる」
と勉強したのですが、文字の位置を調整する前は、画像の左上に表示されるのではなく、
以下の画像のように、アイコンの説明部分の左上に表示されてしまいます。

.name {
/color: white;/
position: absolute;
top: 90px;
}
の場合、文字が下に９０px動くと思いましたが、意図せず画像の縦中央におさまりました。

これは、私のposition: relative;の定義の認識が間違っているのでしょうか。
それともコードがおかしいがために、このように動いてしまうのでしょうか。

あわせて回答いただけると、とても助かります。

Comments

[Cocode]

HTMLの構造的に厳しいのですが、HTMLは書き換えてもいいのでしょうか？

Answer 1

「基準としたい親要素にposition: relative;と指定すると、その要素の左上部分が基準位置となる」
と勉強したのですが、文字の位置を調整する前は、画像の左上に表示されるのではなく、
以下の画像のように、アイコンの説明部分の左上に表示されてしまいます。

position: absolute;を設定した要素は、top, bottom, left, right で位置指定しなければ、元の位置に配置されます。つまり、img要素の下に配置されます。
top: 90px;を指定した時点で、基準点(親要素の左上)から90pxの位置に配置されます。

.name に　right: を設定してみましたが、うまく中央に揃えることができませんでした。

下記のようにすれば中央に配置できます。

figure {
  width: 80%;
  position: relative;
  text-align: center; /* 追加 img要素, .nameのテキストを中央寄せ */
}

figcaption {
  padding-top: 15px;
}

.name {
  /*color: white;*/
  position: absolute;
  top: 90px;
  width: 100%;  /* 追加 */
}

.icon-directon {
  color: #b3aeb5;
  font-size: 13px;
  padding-top: 15px;
  text-align: left;　/* 追加 */
}

追記

position: absolute;で位置決めするというのはどちらかというと古い手法です。
今ならflexとかgridでレイアウトを決めるのが、いいでしょう。シンプルにできるし、レスポンシブ対応も楽です。

flexだとHTMLを修正する必要がありますが、gridならHTMLの修正は必要ないです。
flexのサンプルは他の方から既に出てますので、gridを使ったコード例を提示しておきます。

figure {
  width: 80%;
  display: grid;
  grid-template-rows: max-content auto;
}
.icon, .name {
   grid-column-start: 1;
   grid-row-start: 1;
  justify-self: center;
  align-self: center;
}

Comments

[wkou4627]

私のコードを元に手直しして下さった回答、基礎知識部分の疑問の解決、さらに別の手法まで教えてくださり、全てがスッキリしました！progateで使っている手法は少し古いものもあるということなのですね。。。gridやflexは複雑に思えて苦手意識がありますが、これを機にしっかり勉強に取り組んでみます。

Answer 2

HTMLの構造的に実現が厳しいので、HTMLから変えます。
以下はProgateが提供してくれている公式のHTMLから少し変えています。

HTML

（参考：https://prog-8.com/html/dojo/3/1）

        <div class="lessons">
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/html.png">
              <p class="lesson-language">HTML & CSS</p>
            </div>
            <p class="lesson-description">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
          </div>

          <!-- 省略 -->

        </div>

CSS

.lessons {
  display: flex;
  width: 100%;
}

.lesson {
  width: 25%;
}

.lesson-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
}

.lesson-icon img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
}

.lesson-description {
  padding-right: 10%;
  padding-left: 10%;
}

こんな感じはいかがでしょう?
実際にブラウザで確認していないのでできるかどうかわかりませんが…

---

「HTMLの構造的に実現が難しい」とコメントいただきましたが、具体的にどの部分が難しくしてしまっていたのでしょうか？

画像とHTML&CSSの2つを（水平・垂直方向両方を）中央寄せにしたければ、「その2つだけ」を囲むタグ（containerやwrapperと呼ばれます）が必要です。
ところが質問者様のHTMLでは、その2つにだけを囲うタグは存在せず、<figcaption>も含めて3つを囲う<figure>しかありませんでした。

# ✅ 理想
コンテイナー
　　画像
　　HTML&CSS
コンテイナー閉じ
本文

# 🚫 質問者様のコード
コンテイナー
　画像
　HTML&CSS
　本文
コンテイナー閉じ

Comments

[Cocode]

うまくいきませんでしたらご連絡ください。修正します。

[wkou4627]

ご回答ありがとうございます。早速試してみたところ、HTML & css という文字が消えてしまいました。自分なりにいじってみたところ、画像の裏に重なっているようでした。
.lesson-language{
z-index:1;
}
を加えてみたところ、うまく中央に表示することができました！

[wkou4627]

修正前ですと、「HTMLの構造的に実現が難しい」とコメントいただきましたが、具体的にどの部分が難しくしてしまっていたのでしょうか？もしお時間ありましたら、ご指摘いただけるとさらに勉強の励みになります。
HTMLは少しずつかけるようになってきたかな？と思ってしまっていたので、基礎を見直すきっかけとなりました。ありがとうございました。

[Cocode]

z-index失礼いたしました！ご自身で調整していただいてありがとうございますm(_ _)m
HTMLの構造に関しては回答を更新して追加させていただきますね。
今しばらくお待ちください。

[Cocode]

更新しました！

補足ですが、HTML＆CSSを top: 90px で無理やり縦方向中央にもっていってますが、あまりおすめしません！
レスポンシブにして画像のサイズが変更になった時を考慮したさらなる調整が面倒だと思います。
数値と目分量で中央っぽいところにもっていくのではなく、きちんと中央に配置するほうがおすすめです。

[wkou4627]

HTMLの構造についても回答していただきありがとうございます！どこからどこまでを囲み、どうcssに対応させるかまで考えられていないレベルに自分はいるのだと気が付くことができました。メインの質問に対する回答のレベルに自分が到達しておらず、まだ理解が足りていませんが、勉強を進めて、見返した時に「ああこういうことだったのか！」となれるように頑張ります！本当にありがとうございました。