ここから本文です

CSSのtext-align:centerはブロックレベル要素にも効きますよね?

mos********さん

2019/7/2516:54:25

CSSのtext-align:centerはブロックレベル要素にも効きますよね?

css初心者です。
教材によると、text-align:centerは、
「中央寄せしたい要素がインライン要素であること。」が効く条件のようですが、
実際、中央寄せしたい要素が「h1」や「p」タグ等のブロックレベル要素でも効きますよね?

となると、「中央寄せしたい要素がインライン要素であること。」…これは誤りですか?

閲覧数:
29
回答数:
2

違反報告

ベストアンサーに選ばれた回答

scarさん

2019/7/2520:05:02

いいえ、誤りではありません。

text-align は、テキストや画像のみ(インライン要素)に有効であり、
<div>要素自体に効くわけではない。

要はブロックレベル要素に指定し、
その「ブロック要素の中のインライン要素」に効くという事。

↑やや矛盾ぽく聴こえるかも知れないが、
これは、あくまでも「ブロックレベル要素」に指定するだけで、効くのは「インライン要素」と言う意味。


・例えば、

<p class=“test”>テキスト</p>

.test {
text-align:center;
}

これならテキストは左右中央になるが、ここにwidthを指定したら、
そのwidth範囲内での中央になる。

※ブロックレベル要素をセンターにしたい場合は、
margin の左右をautoで良い

  • 質問者

    mos********さん

    2019/7/2520:38:04

    回答ありがとうございます!

    確かに、divの囲み自体を中央寄せは出来ませんが、
    例のコードのpタグはブロックレベル要素ですよね?

    例えば、
    <div class="test">
    <p>テキスト</p>
    </div>

    .test p {
    text-align:center;
    }
    このコードの場合でも「テキスト」は中央寄せになりますよね?
    この場合は「ブロック要素の中のブロック要素」に効くという事になりませんか?

  • その他の返信(5件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

ベストアンサー以外の回答

1〜1件/1件中

p3_********さん

2019/7/2520:46:47

センタリングが適用されるのはインライン要素ですね。
例えるなら、確かにHやPはブロックですが、センタリングが適用される中身はインライン要素です。

また、HやP等のブロック要素自体をセンタリングしたいとき、例えばDIV内部にあるP自体をセンタリングする場合は、別の方法でなければなりません。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる