前提・実現したいこと

複数のpタグとそれらを囲むdivタグがあります。
このdivの中で中央に配置し、pタグのテキストを左に揃えたいです。

発生している問題・エラーメッセージ

中央配置、左揃えができていません。

該当のソースコード

html
1<div>
2  <p>
3    あいうえお
4  </p>
5  <p>
6    あいうえおかきくけこ
7  </p>
8  <p>
9    あいうえおかきくけこさしすせそ
10  </p>
11  <p>
12    あいうえおかきくけこさしすせそたちつてと
13  </p>
14</div>

css
1div {
2  padding: 16px;
3  background-color: lightgray;
4}
5
6p {
7  line-height: 1;
8  position: relative;
9  padding-left: 24px;
10}
11
12p::before {
13  content: "%";
14  position: absolute;
15  left: 0;
16}

試したこと

divにtext-align: center、pにtext-align: leftとdisplay: inline-blockを設定しましたが、効果はありませんでした。

追記

幅の設定をしていなかったので、別のサンプルを用意しました。
サンプル2

Lhankor_Mhy

2020/10/23 09:44

p要素の幅はどうすればいいですか？　何も指定しなければ親要素と同じ幅になるので、中央配置もなにも変わらなくなります。

erajera

2020/10/23 10:11

おっしゃる通りです。pではなく親に幅を設定しましたので、よろしければご確認ください。

Lhankor_Mhy

2020/10/23 10:20

いえ、そうではないです。繰り返しになってしまって申し訳ないのですが。 div が width: 740px; p が width: auto; だとすると、auto は 100%になるので、結果的にこうなります。 div が width: 740px; p が width: 740px; --- この状態で、p を「このdivの中で中央に配置」しても、幅が同じなので、右寄せや左寄せと区別できません。ですので、p の幅は div の幅と変える必要があるはずです。

erajera

2020/10/23 10:33

p要素の幅は、文字数が一番多いp要素の幅に設定することはできないのでしょうか。

Lhankor_Mhy

2020/10/23 10:35

なるほど、問題を把握しました。ここを読んでいるのは私ぐらいでしょうから、他の回答者にもわかるようにそのようにご質問に追記されることをおすすめします。

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

回答2件

ベストアンサー

p要素の幅は、文字数が一番多いp要素の幅に設定

このような形ではいかがですか？

css
1div {
2  display: grid;
3  grid-template-columns: max-content;
4  justify-content: center;
5}

投稿2020/10/23 10:47

Lhankor_Mhy

総合スコア36115

erajera

2020/10/23 15:42

ぱっと見ではなぜご教示いただいたコードで実装できているかが現状では理解できないですが、希望する形になりました。ご教示いただいたコードを反芻します。ありがとうございます。

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

これでいけるんじゃないかな？
正直、基礎の基礎から勉強しなおした方がいいですよ。

index.html
1コード
2<!DOCTYPE html>
3<html lang="ja">
4	<head>
5		<meta charset="UTF-8">
6		<title>流石に基礎を学びましょう！！！</title>
7		<link rel="stylesheet" type="text/css" href="index.css">
8	</head>
9	<body>
10		<div>
11		  <p>
12		    あいうえお
13		  </p>
14		  <p>
15		    あいうえおかきくけこ
16		  </p>
17		  <p>
18		    あいうえおかきくけこさしすせそ
19		  </p>
20		  <p>
21		    あいうえおかきくけこさしすせそたちつてと
22		  </p>
23		</div>
24	</body>
25</html>

index.css
1コード
2div {
3  padding: 16px;
4  background-color: lightgray;
5  text-align:center;
6  width:600px; height:300px;
7  margin:auto;
8}
9
10p {
11  line-height: 1;
12  text-align:left;
13}
14
15p::before {
16  content: "%";
17}

投稿2020/10/23 08:46

Damaku_ProG

総合スコア29

erajera

2020/10/23 15:51

回答いただきありがとうございます。ご教示いただいたコードをコピペしたのですが、私が希望するスタイルにはなりませんでした。参考までにコピペしたサンプルのリンクを貼りますので、よろしければご確認ください。 https://jsbin.com/voxuyozibe/edit?html,css,output

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

あなたの回答