テキストを左揃えで、中央寄せ

テキストを左寄せにして、中央揃えにしたいです。
message-wrapper部のmessageは中央寄せで、その内容は左によせたいのですが、どうして下記のcssではそうならないんでしょうか？

※関係ないと思われる、トップメニュー等のhtmlは割愛しています。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <title>Document</title>
8  <link rel="stylesheet" href="style.sheet/style.css">
9</head>
10<body>
11<div class="message-wrapper">
12  <h1>旅に出よう。</h1>
13  <div class="message">
14    <p>
15      僕たちが作りたいのは<br>
16      持っているだけで旅に出たくなるモノ。<br>
17       持っているだけでわくわくするモノ。
18    </p>
19    <p> 
20      それは新しい時代の “パスポート”<br>
21        僕たちが作るものは、<br>
22        そんな、存在でありたい。<br>
23      </p>
24      <p>
25          そして、人と人が繋がる<br>
26          こんな時代だからこそ、<br>
27          僕たちは、みんなでひとつのモノを<br>
28          作ることを追求したい。
29      </p>
30      <div class="logo"><ruby><rb>PAS-POL </rb><rt>パスポル</rt></ruby></div >
31      <p>
32          それは、自分と世界を繋げる
33          旅のモノづくりブランド
34      </p>
35    </div>  
36  </div>
37
38
39コード

css
1body{
2  font-family: serif;
3    margin: 0;
4    padding: 0;
5 }
6
7.top-wrapper{
8  background-image: url(../image/main_visual_13-0x0.jpg); 
9  height:1200px;
10  background-size:cover; 
11}
12
13.top-wrapper .container{
14  color:white;
15  padding:5px 20px;
16  heigiht:200px;
17  font-family: MS PGothic;
18}
19
20.header-left{
21  font-size :30px;
22  float:left;
23}
24
25.header-right li{
26  float:right;
27  list-style:none;
28  letter-spacing: 7px;
29  margin:10px;
30  display: block;
31  color:white;
32}
33
34.message-wrapper {
35  margin-top:10px;
36  text-align: center;
37}
38
39.message p{
40  text-align:left;
41  display: inline-block;
42}
43
44.logo {
45  ruby-align:center;
46  font-size:40px;
47  text-align: center;
48  margin:0 auto;
49}

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

回答2件

このサイトのようにしたいのですが...

これではどうでしょうか？

.message {
  margin: 0 auto;
  width: 300px;
}

.message p{
text-align:left;
/* display: inline-block; */
}

解説すると、message-wrapperのなかにmessageのブロックが浮かんでいる感じなので、そのブロックをマージンで中央に自動調整しています

投稿2019/12/21 04:17

編集2019/12/21 04:20

story_aniki

総合スコア197

kmome

2019/12/21 04:33

ありがとうございます。こちらのcssでもできました！！！本当にありがとうございます。

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

ベストアンサー

どうして下記のcssではそうならないんでしょうか？

css
1.message p{  
2text-align:left;  
3display: inline-block;  
4}

このdisplay: inline-block;は、内部はブロック、外部から見るとインライン、という指定です。
大雑把に言うと、p要素の中身はブロックのようにふるまうが、そのコンテナブロックから見ると、一つの大きな文字として扱われます。

なので、「僕たちが……わくわくするモノ。」で一文字、「それは新しい時代の……存在でありたい。」で一文字、「そして、……追求したい。」で一文字、として中央揃えされます。
「ABC」という文字列を大きなフォントで中央揃えで表示したようなものだと思えば、わかりやすいかもしれません。

投稿2019/12/21 03:26

Lhankor_Mhy

総合スコア36941

kmome

2019/12/21 03:53

大変ご丁寧にありがとうございます。 inline-blockについてはよくわかりました。しかしネットで調べたときに、テキストを左寄せのまま中央に配置するのは、display:inline-blockすればよいと書いてあったので、少しこんがらがっています。 https://pas-pol.jp/ このサイトのようにしたいのですが...

Lhankor_Mhy

2019/12/21 04:07

> しかしネットで調べたときに、テキストを左寄せのまま中央に配置するのは、display:inline-blockすればよいと書いてあったそのページを見ていないので何とも言えません。 > このサイトのようにしたいのですが... そういう時は、デベロッパーズツールでそのままパクるのが一番楽ですよ！ https://takuohashimoto.com/shakei_web/#CSS

kmome

2019/12/21 04:29

なるほど！パクるのもありなんですね。ご丁寧にありがとうございました。

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

あなたの回答