position relativeとabsoluteが効かない

前提・実現したいこと

lesson-picのimgの中央にlessons-pic pを表示させたいのですが、
以下で試してもできません。

該当のソースコード

【HTML】

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

  </div>
</main>

【CSS】

main {
  background: #f7f7f7;
  /* text-align: center; */
}

main h1 {
  padding: 50px;
  font-weight: normal;
  letter-spacing: 2px;
  text-align: center;
}

.lesson-container {
  display:flex;
  justify-content: space-between;
  padding:0 30px 0 30px ;
}

.lessons {
  width: 250px;
}

.lesson-pic img {
  width:100%;
  
}


 .text { 
  color: #b3aeb5;
   text-align: center; 
}

.lesson-pic {
  position :relative;
}


.lesson-pic p {
  position :absolute;
  top:（100px）;　
/*仮に100pxとしていますが、何も起こりません*/
  
}

kei344

2020/04/17 17:27

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、CSS内にコメントを入れるならCSSの文法に添った形で提示してください。

dorachan1293

2020/04/18 00:41

教えていただきありがとうございました！！次回から気を付けます！

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

回答1件

ベストアンサー

html
1<div class="lesson-pic"><img src="https://prog-8.com/images/html/advanced/html.png"></div>
2<p>HTML&CSS</p>

となってますが、lesson-pic 内に p が入ってません。

html
1<div class="lesson-pic">
2    <img src="https://prog-8.com/images/html/advanced/html.png">
3    <p>HTML&CSS</p>
4</div>

としないと、.lesson-pic pセレクタは有効になりません。

上記のようにHTMLを修正して、CSSは下記のように設定すれば、imgの中央に表示されます。

css
1.lesson-pic {
2  position: relative;
3}
4
5.lesson-pic p {
6  position: absolute;
7  top: 100px;
8  width: 100%;
9  text-align: center;
10}

投稿2020/04/17 18:03

hatena19

総合スコア33790

dorachan1293

2020/04/18 01:03 編集

ありがとうございます！中央に持ってくることができました！ただ…以下のようにしたときに上手くいったので今回も同じ設定をしたのですが、今回はなぜ<p>まで<div>で囲まなければならなかったのでしょうか？？ ``` <div class="lessons"> <div class="pic"><img src="https://prog-8.com/images/html/advanced/jQuery.png"></div> <p>HTML</p> </div> ``` ``` .lessons { position: relative; } .lessons p { position: absolute; top: 100px; left:50px; } ```