リストの中央寄せについて（リスト内文字列はインライン要素か）

以下ソースにてリスト全体を中央寄せしようとしたところ、
黒点は左のままでリスト内文字列（例：リスト１）のみ中央寄せがされました。

これは、以下のようにリスト内文字列がインライン要素であるため、
起きた事象で宜しいでしょうか。

【li】
→ブロック要素のため、以下に記載したcssの影響を受けない。

【リスト内文字列】
→インライン要素のため親ブロック要素divのtext-align：center;の
影響を受け中央寄せになった。

リスト全体の中央寄せについては、divのtext-align:center;を消し、
liにmargin:auto;を追記することで実現できる事は確認済みです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta cherset="utf-8">
5	<link rel="stylesheet" href="test2.css">
6</head>
7<body>
8<div class="div_a">
9	<ul class="list1">
10		<li class="li_1">リスト１</li>
11		<li class="li_2">リスト２</li>
12		<li class="li_3">リスト３</li>
13	</ul>
14</div>
15</body>
16</html>

CSS
1.div_a{
2	text-align:center;
3}
4
5.li_1{
6	width:400px;
7	background-color:green;
8
9}
10
11.li_2{
12	width:400px;
13	background-color:yellow;
14
15}
16
17.li_3{
18	width:400px;
19	background-color:blue;
20
21}

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

回答2件

ベストアンサー

リスト要素（displayプロパティは list-item）に付くリストマーカー（::marker 疑似要素）は、デフォルトで自身の要素の外に付きます（list-style-position: outside;）。質問文中のコードでは、リスト要素は幅いっぱい、その外にリストマーカーが付くので、センター揃えは文字列にしか適用されません。

リスト要素に list-style-position: inside; を付けることで、リストマーカーがリスト内要素（ここでは文字列）の頭に付き、リストマーカーも含めセンター揃えにすることができます。

投稿2018/10/22 21:20

takna

総合スコア784

Tiroze

2018/10/23 09:14

回答ありがとうございます。対処方法教えていただき助かりました。追加で質問ですが、センター揃え(text-alin)が文字列に適用されるのはli要素(ブロック要素)だからでしょうか。それとも、タグなしの文字列がインライン要素と見なされるからでしょうか。 ›その外にリストマーカーが付くので、 ›センター揃えは文字列にしか適用されません。

takna

2018/10/23 10:16 編集

li要素をインラインにすると、要素が文字列自身の高さと幅になるのでセンター揃えは効かないですよね。ただ、li要素の中に何かしらのブロック要素を入れたら効きます。つまり、li要素(ブロック要素)だからで合ってます。デフォルトで入れ物の外に付くリストマーカーを、`list-style-position: inside;` で入れ物の中に付けるように変えたという認識で良いんじゃないでしょうか。分かりづらくてすみません。私も勉強が必要です。

Tiroze

2018/12/30 01:18

確認遅くなりまして申し訳ありません。ありがとうございます、理解できました

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

css
1.div_a{
2  display: flex;
3  justify-content: center;
4}

だけでもセンター配置できると思います。

投稿2018/11/01 08:40

yamana

総合スコア118

Tiroze

2018/12/30 01:19

ありがとうございます。この方法は初耳でした、今後使ってみます

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

リストの中央寄せについて（リスト内文字列はインライン要素か）

関連した質問