画像もtext-alignで中央に寄せられるの？

小さな画像なら寄ります。imgは文字と同じ「インライン」の仲間として扱われるため、親にtext-align: centerを指定すると、中の画像も文字と同じように中央へ寄ります。

上下方向の中央寄せもtext-alignでできる？

できません。text-alignがそろえるのは左右方向だけです。上下の中央寄せは、Flexboxのalign-itemsなど別の道具のしごとになります。

文章はふつう、左からはじまります。でも、見出しは真ん中に置いたほうが映えるし、日付や署名は右にそろえると収まりがよい。この文字のそろえ方をあやつるのが text-align です。

h1 {
  text-align: center;
}

これで見出しが中央ぞろえになります。値を入れ替えれば、そろえる方向が変わります。

見出しは center、そえ書きや日付は right——といった具合に、役割で使い分けると、ページに落ち着きが出ます。

3つの値を並べてみると、文字の寄る位置の違いがはっきりします。

箱の幅は3つとも同じ。動いているのは、あくまで箱の中の文字の位置だけです。

left・center・rightのほかに、justifyという値もあります。行の両端をそろえる指定で、新聞や書籍でよく見る組み方です。

p {
  text-align: justify;
}

行の右端がぴったりそろう代わり、文字と文字のすき間が行ごとに微妙に伸び縮みします。見た目が気になるときは、無理に使わずleftのままにしておくのも立派な選択です。

同じ文章を、ふつうの左そろえとjustifyで並べてみると、右端のそろい方の違いが見えてきます。

上がふつうの左そろえ、下がjustify。下の箱は、行の右端がぴったりそろっているのが分かります。

そろうのは“中の文字”だけ

text-align が動かすのは、あくまで箱の中の文字です。箱そのものを画面の真ん中に持っていくものではありません。

.box {
  width: 300px;
  text-align: center; /* 中の文字だけ中央へ */
}
.box-centered {
  width: 300px;
  margin: 0 auto; /* 箱そのものを中央へ */
}

.boxは箱の位置はそのまま、中の文字だけが中央に寄ります。箱ごと画面の真ん中に持っていきたいときは、text-alignではなくmargin: 0 auto;のしごとです。「文字を、箱の中でどこに寄せるか」——ここを取りちがえないようにしましょう。