スポンサーリンク
中央寄せのままの場合
これは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のみを設定します。
以上です。
感謝!!神!!!
ワードプレスでサイト作成、まだまだ修行中の身です。
投稿記事一覧を、まさにこの記事のように中央よせだけどテキストは左に揃えたくて、かれこれ3時間ほど悪戦苦闘していました。
そしてこちらの記事にたどり着き、ようやく解決しました!
本当にありがとうございました!!!
Saito様、コメントありがとうございます。
お役に立てて良かったです。
こんばんは。最近HTMLと CCSを勉強し始めたものです。1日中「text-align:center;」と「margin:0 auto」を調べて頭がこんがらがっていたところ、こちらの記事に辿り着きとても理解が深まりました。初心者にもわかりやすく例を示していただいていらっしゃるので理解がしやすかったです。ありがとうございます。大変失礼を承知で質問させていただきたいのですが、
sample{display:block;}とありますが、このdisplay:blockは文字(あいうえおかきくけこ、さしすせそ、たちつてとなにぬねのはひふへほ)を縦に並べている、という意味でしょうか?が改行という意味だと勉強したので、このdisplay:blockの意味を知りたいです。超初心者な質問で申し訳ないのですが教えていただけますでしょうか?よろしくお願いいたします。
chiaki.m様、コメントありがとうございます。
質問の回答ですが、以下のようになります。
blockを使用したのは、左右の領域の確保してセンタリングされていることがわかるようにしているためです。
例えばinline-blockを設定すると、左右の領域が確保されずに表示してしまいます。
回答いただきありがとうございました。例を見た時にわかりやすいように余白をとるためだったのですね。理解が深まりました。他の記事もぜひ読ませていただきます。ありがとうございます!
四苦八苦していたので、助かりました。ありがとうございます。
年収1000万の男様、コメントありがとうございます。
お役に立てて良かったです。
こうするとこうなっちゃうよ という失敗パターンも
解説されていたおかげで、つまづいていた部分に気づけました!
なかなかこんな風に丁寧に解説してくださるサイトは見つからないです。
助かります。ありがとうございました。
beco様、コメントありがとうございます。
お役に立てて良かったです。