inline-blockの役割

Progate　道場コース　中級編にて
.lesson-pにdisplay:inline-block;を指定しないと、上の画像のように位置がおかしくなってしまいます
（指定すると下のように綺麗に揃う）　inline-blockについての性質も調べたのですが、今回のような件が起こる理由がわかりませんでした　

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" href="stylesheet.css">
7  <!-- ここでFont Awesomeを読み込んでください -->
8  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9</head>
10<body>
11  <!-- ここにコードを書いていきましょう -->
12 <header>
13  <div class="header-left">
14   <img src="https://prog-8.com/images/html/advanced/main_logo.png">
15  </div>
16  <div class="header-right">
17   <a href="#">ログイン</a> 
18  </div>
19 </header>
20 <div class="top-wrapper">
21 
22  <div class="top">
23  <h1>LEARN TO CODE.</h1>
24  <h1>LEARN TO BE CREATIVE.</h1>
25  <p>Progateはオンラインプログラミング学習サービスです。</p>
26  <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 
27  </div> 
28 
29  <a href="#" class="signup btn">新規登録はこちら</a>
30  <p class="top-p ">or</p>
31  <a href="#" class="facebook btn"><span class="fa fa-facebook"></span>Facebookで登録</a> <a href="#" class="twitter btn"><span class="fa fa-twitter"></span>Twitterで登録</a>
32  
33 </div>
34<div class="lesson-wrapper">
35 <div class="container">
36  <div class="lesson-title">
37  <h2>Learn Where to Get Started!</h2>
38 </div>
39 <div class="lessons">
40  <div class="lesson">
41  
42   <img src="https://prog-8.com/images/html/advanced/html.png">
43   <p class="lesson-name">HTML & CSS</p>
44   <p class="lesson-p">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
45  </div>
46  
47  <div class="lesson">
48   <img src="https://prog-8.com/images/html/advanced/jQuery.png">
49   <p class="lesson-name">jQuery</p>
50   <p class="lesson-p">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
51  </div>
52  
53  <div class="lesson">
54   <img src="https://prog-8.com/images/html/advanced/ruby.png">
55   <p class="lesson-name">Ruby</p>
56   <p class="lesson-p">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
57  </div>
58  
59  <div class="lesson">
60   <img src="https://prog-8.com/images/html/advanced/php.png">
61   <p class="lesson-name">PHP</p>
62   <p class="lesson-p">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
63  </div>
64  
65 </div>
66</div>
67 
68</div>
69  
70  
71</body>
72</html>

CSS
1/* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12.container {
13  width: 1170px;
14  padding: 0 15px;
15  margin: 0 auto;
16}
17
18li {
19  list-style: none;
20}
21
22a {
23  text-decoration: none;
24}
25
26
27/* ここからCSSを書いていきましょう */
28.top-wrapper{text-align:center; padding-top:180px; padding-bottom:100px;
29background-image:url(https://prog-8.com/images/html/advanced/top.png);
30background-size:cover;
31}
32.top-wrapper h1{font-size:45px; letter-spacing:5px; color:white;
33opacity:0.7;
34}
35.top-wrapper p{color:white; opacity:0.7; } .top{margin-bottom:30px;}
36.top-p{margin-top:25px; margin-bottom:25px;}
37.signup{background-color:#239b76; color:white; opacity:0.8;}
38.facebook{background-color:#3b5998; color:white; opacity:0.8; margin-right:10px;}
39.twitter{background-color:#55acee; color:white; opacity:0.8;}
40.btn{padding:8px 24px; border-radius:4px;}
41.btn:hover{opacity:1;} .top-wrapper span{margin-right:5px;}
42
43header{height:65px; background-color:rgba(34,49,52,0.9); z-index:10; width:100%; position:fixed; top:0px;}
44.header-left img{width:124px; padding-top:20px; margin-left:50px; float:left;} 
45.header-right {float:right;  line-height:65px; 
46background-color:rgba(255,255,255,0.3);  margin-right:40px; transition:all 0.5s;
47} 
48.header-right a{display:block; color:white;padding-right:25px; padding-left:25px;} 
49.header-right:hover{background-color:rgba(255,255,255,0.5);}
50
51.lesson-wrapper{height:580px;  text-align:center; background-color:#f7f7f7;} .lesson-title h2{font-weight:normal; color:#5f5d60;
52 padding-top:80px; padding-bottom:50px;} .lesson{float:left; width:25%; position:relative; margin-bottom:15px;}
53 .lesson img{position:relative;} .lesson-name{position:absolute; top:90px; width:100%; color:white;}
54.lesson-p{width:80%; display:inline-block; font-size:13px; color:#b3aeb5; margin-top:15px;}
55

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

回答1件

ベストアンサー

~~.top-wrapper~~ .lesson-wrapperにtext-align:center;を設定することで内包する各要素を中央寄せしていますが、text-align:center;はインライン要素に有効ですが、ブロックレベル要素には効きません。

p要素は既定ではブロックレベルなので、inline-blockでインラインに変更してtext-align:center;が効くようにしてます。

投稿2020/09/20 03:50

編集2020/09/21 05:08

hatena19

総合スコア33757

syo--

2020/09/21 04:31

ご回答ありがとうございます　https://teratail.com/questions/291375 以前text-align要素についての質問をしたのですが、そこではh2,h3が親要素のtext-align を継承して、文字を真ん中に寄せていました一旦、.top-wrapperのtext-align:center;と.lesson-pからinline-blockを消し、.lesson（.lesson-pの親要素）にtext-align:center;を指定してみたのですが、やはり文字の位置がおかしくなってしまいました　p要素への継承は起こらないのでしょうか？

hatena19

2020/09/21 05:09 編集

回答の .top-wrapper は .lesson-wrapper の間違いでした。回答の方も修正しておきます。 text-align:center; のp要素への継承は起きてますよ。中のテキストは中央寄せになっているはずです。 text-align:center; は設定した要素の中のインライン要素に有効ですので。

syo--

2020/09/21 06:13 編集

.lesson-pの背景を赤色にしてみたところ、確かにp内部のテキストが真ん中に寄っているのが確認できました！ .lesson-pにtext-align:center;が継承され、先に中の文字が真ん中に寄る→そのあと、レイアウトを整えるため.lesson-pにdisplay:inline-block;を指定し、.lesson-p自体を真ん中に寄せる　という流れですね！理解できましたありがとうございます

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