【CSS】li・ulで箇条書きを中央寄せ×左寄せにしたいときの書き方

こんにちは！

今回は「CSSでli・ulで箇条書きを中央寄せ×左寄せにしたいときの書き方」についてお伝えしたいと思います。

意外と書き方に悩むことが多いのかなとも思ったので、記事にしました。

CSSでli・ulで箇条書きを中央寄せ×左寄せにしたいときの書き方

まずは結論から

html

<div class="contents">
	<ul class="contents__ul">
		<li class="contents__li">1行目テストテスト</li>
		<li class="contents__li">2行目テストテストテストテスト</li>
		<li class="contents__li">3行目テストテストテストテストテストテスト</li>
		<li class="contents__li">4行目テストテストテストテストテストテストテストテスト</li>
		<li class="contents__li">5行目テストテストテストテストテストテストテストテストテストテスト</li>
	</ul>
</div>

css

.contents {
	margin: 16px auto;
	text-align: center;
	border: 1px solid #000;
}
.contents__ul {
	padding-left: 0;
	list-style: none;
	display: inline-block;
}
.contents__li {
	text-align: left;
}

画面表示結果

このように中央寄せ×左寄せになりました！

ちなみにtext-align: centerを指定しないと、以下のように文字列によって開始位置がバラバラになってしまいます。

ポイントはulタグの親要素としてdivタグを設定し、text-align: centerを当ててあげることです。

以上、お疲れさまでした〜🍵