行の揃え位置を設定するtext-align
text-align
このプロパティはブロックレベルの要素内で画面幅に満たない文章や画像をどこにそろえて表示するかの設定をします。
よくある勘違いでどの要素にこれを付けて効果があると思い込みがちですが対象とされる要素はブロックレベルなので注意しましょう
このプロパティは設定した値が子要素にも継承してしまうことも覚えておきましょう
例えば
1 2 3 4 |
<body> <h1>見出し</h1> <p>文章</p> </body> |
のようなコードがあったとしましょう
text-alignは設定した値が子要素にも継承してしまうので「body」に対して設定してしまうとすべての要素の揃えが設定した値になってしまいます。
こういった特性を持ち合わせてしまっているので、できれば細かく設定していくといいかもしれません。
プロパティ値
プロパティ値は色々設定できますが基本的な3つを覚えておけば問題はないでしょう
left
左側によってくれます
あとで元に戻したくなったり、デフォルトで中央揃えの要素につけて見た目を変えたりしましょう。
right
個人的に使用頻度はあまり高くありませんが右側に寄せるときに使います
center
中央に寄ます
画像などの中央寄せによく使われるのではと思いますがimgを動かすときは何かブロックレベルの要素で囲んでいないと動きませんので要注意