Progate 中級　text-contents、 inline-block について

lesson-icon pもtxt-contentsも同じ<p>でブロック要素なのになぜtxt-contentsはdisplay:inline-block;にしてlesson-icon pはブロック要素にする必要があるのですか。分かる方いらっしゃいましたら回答お願いします。

html
1  <div class="lesson-wrapper">
2      <div class="container">
3        <div class="heading">
4          <h2>Learn Where to Get Started!</h2>
5        </div>
6        <div class="lessons">
7          <div class="lesson">
8            <div class="lesson-icon">
9              <img src="https://prog-8.com/images/html/advanced/html.png">
10              <p>HTML & CSS</p>
11            </div>
12            <p class="txt-contents">Webページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
13          </div>
14          <div class="lesson">
15            <div class="lesson-icon">
16              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
17              <p>jQuery</p>
18            </div>
19            <p class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
20          </div>
21          <div class="lesson">
22            <div class="lesson-icon">
23              <img src="https://prog-8.com/images/html/advanced/ruby.png">
24              <p>Ruby</p>
25            </div>
26            <p class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
27          </div>
28          <div class="lesson">
29            <div class="lesson-icon">
30              <img src="https://prog-8.com/images/html/advanced/php.png">
31              <p>PHP</p>
32            </div>
33            <p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
34          </div>
35        </div>
36      </div>
37    </div>
38
39

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

回答3件

私もProgateを学習している者です。

原因は前回答者さんの説明通りですがlesson-wrapperで設定しているtext-aligh: centerにあります。
lesson-icon pもtxt-contentsも同じ<p>タグですが、
txt-contentsの方はwidth:80%になっているので、display: inline-blockを設定しなければtext-aligh: centerが効かず左に寄ってしまいます。
代わりにmargin: 20px auto 0 auto;としても良いですがここではdisplay: inline-blockとしている様です。

投稿2020/02/15 13:15

PIGPEN

総合スコア36

aku424tt

2020/02/16 00:32

回答ありがとうございます。 txt-contentsにdisplay:inline-block;を指定する理由はわかるのですが、lesson-icon pにdisplay:inline-block;を指定しない理由が分からない状態です。

PIGPEN

2020/02/16 01:49

hatena19さんが回答してくれていますが、 lesson-icon pはwidth: 100%と指定してlesson-iconのwidthに合わせているので、 inline-blockにしなくても中央揃えが出来る様になっています。なのでここではinline-blockにする必要はありません。どうしてもinline-blockにしたいのであれば、 left: 0px; z-index: 5;を追加すれば中央揃えになるはずです。

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

ベストアンサー

該当ページを検証ツールで見てみると、
親要素(.lesson-wrapper)でtext-align: center;を設定して各要素の中央寄せしているようですね。
text-align: center;はインラインブロックにしか有効でないので、
.txt-contentsにdisplay:inline-block;を設定して中央寄せが有効になるようにしているのだと思います。

コメントより

txt-contentsにdisplay:inline-block;を指定する理由はわかるのですが、lesson-icon pにdisplay:inline-block;を指定しない理由が分からない状態です。

lesson-icon p は

css
1    position: absolute;
2    top: 90px;
3    width: 100%;

というように絶対値で位置決めしています。
ですので、inline-block にする必要はないのです。
pブロック自体は幅100%なので幅は親ブロック全体に広がり、上から90pxの位置に固定されます。
中のテキストはtext-align: center;が効いてpブロック内で中央寄せになります。

投稿2020/02/14 11:38

編集2020/02/16 00:52