コンテンツの中身を中央寄せに設定していて、文字は中央寄せにしないで、左寄せにしたい時があります。pタグとliタグの２つのパターンを書きとめます。

中央寄せのままの場合

これはsample内でtext-alignをcenterに指定した場合です。文字も中央寄せになっています。

あいうえおかきくけこ
さしすせそ
たちつてとなにぬねのはひふへほ

pタグの場合

pタグ内の文字列を左寄せにします。

あいうえおかきくけこ
さしすせそ
たちつてとなにぬねのはひふへほ

html


<div class="sample">
	<p class="text">
		あいうえおかきくけこ<br/>
		さしすせそ<br/>
		たちつてとなにぬねのはひふへほ
	</p>
</div>

css


.sample {
	margin: 16px auto;
	text-align: center;
	display: block;
	border: 1px solid #000;
}
.sample .text {
	text-align: left;
	display: inline-block;
}

親要素であるsampleのtext-alignはcenterで、子要素のtextをtext-align:leftにしています。しかしこれだけでは親要素の設定が消されてしまい単なる左寄せになってしまいます。ここで重要なのはdisplayをinline-blockを指定しているところです。これにより親要素と子要素の設定が有効になり、中央寄せでテキストを左寄せにできます。

liタグの場合

liの場合もdisplayにinline-blockを設定することは同じですが、設定するタグがpの時と異なります。
  • あいうえおかきくけこ
  • さしすせそ
  • たちつてとなにぬねのはひふへほ

html


<div class="sample">
	<ul>
		<li>あいうえおかきくけこ</li>
		<li>さしすせそ</li>
		<li>たちつてとなにぬねのはひふへほ</li>
	</ul>
</div>

css


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

liにdisplay:inline-blockを設定すると文字がすべてつながってしまうので、ulの方に設定します。liにはtext-align:leftのみを設定します。

以上です。