divにtext-alignは効かないとよく言いますが・・

Question

spanタグにtext-align:rightを指定しても効かず、え？と思ってdisplay:blockでブロック化したら効きました。。
インライン要素をブロック要素に変えたら逆にtext-align:rightが効くってどういうことなのでしょうか。

Answer 1

text-align は CSS において、ブロックコンテナに対して適用されるもの、と定義されているからです。そしてその作用は、ブロックコンテナのインラインコンテンツに対して配列を制御するものです。

ですから display:inline; が標準である span には適用されませんが、display:block; でブロックコンテナとして扱うとされた span には利くのです。

Answer 2

text-alignはspan・a・imgなどのインライン要素に対しては使えません。
div・p・ulなどのブロック要素にだけ使えます。

ブロック要素の中に効くと考えた方が分かりやすいと思います。

<div><img src="xxxxx"></div>

divにtext-align:rightを指定すれば中の画像が右寄せになりますが、
imgにtext-align:rightを指定しても画像は右寄せになりません。

divそのものを右寄せにしたい時は、divにtext-align:rightを指定しても効きません。
この場合は、marginやfloatなどを使う必要があります。

divも、下記のようににdisplay:inline;を指定して、外側にtext-align:rightを指定すれば効きます。

<div class="wrap"><div class="inner"><img src="xxxxx"></div></div>

.wrap{
text-align:right;
}
.inner {
display: inline;
}

Comments

[tokyodesk]

ありがとうございます！
助かりました。

Answer 3

divにtext-alignは効かないとよく言いますが

それは、divそのものを動かす場合の話です。div内部にはふつうに適用可能です。

Comments

[tokyodesk]

ありがとうございます。
まだ疑問が残るのですが、spanでは逆に効きませんでした。
text-alignはインライン要素に対しては無効なのでしょうか。