Weblasts

行の揃え位置を設定するtext-align

text-align

このプロパティはブロックレベルの要素内で画面幅に満たない文章や画像をどこにそろえて表示するかの設定をします。
よくある勘違いでどの要素にこれを付けて効果があると思い込みがちですが対象とされる要素はブロックレベルなので注意しましょう
このプロパティは設定した値が子要素にも継承してしまうことも覚えておきましょう

例えば

のようなコードがあったとしましょう
text-alignは設定した値が子要素にも継承してしまうので「body」に対して設定してしまうとすべての要素の揃えが設定した値になってしまいます。
こういった特性を持ち合わせてしまっているので、できれば細かく設定していくといいかもしれません。

プロパティ値

プロパティ値は色々設定できますが基本的な3つを覚えておけば問題はないでしょう

left

左側によってくれます
あとで元に戻したくなったり、デフォルトで中央揃えの要素につけて見た目を変えたりしましょう。

right

個人的に使用頻度はあまり高くありませんが右側に寄せるときに使います

center

中央に寄ます
画像などの中央寄せによく使われるのではと思いますがimgを動かすときは何かブロックレベルの要素で囲んでいないと動きませんので要注意

その他については参考サイト

POPULAR