text-alignとvertical-alignの違いを徹底解説！CSSの揃え方を中学生にもわかる図解つき

---

text-alignとvertical-alignの基本的な違いを理解する

ここでは text-align と vertical-align の基本的な違いを、例を交えながら中学生にもわかるようにやさしく解説します。まず大事なのは 水平な揃え方 と 垂直な揃え方 の違いです。text-align は主にブロック要素の内部で横方向に並ぶテキストや inline 要素を水平方向に揃えるために使われます。たとえば段落の中の文字を左・中央・右にそろえるときに用います。これを理解しておくと、ウェブページの見た目ががらりと変わります。text-align を設定するだけで文字の並びが端から端まで揃って見え方が変わります。反対に vertical-align は垂直方向の揃え方で使われ、主に inline 要素や table-cell の中での配置を決める時に使われます。div や p といったブロック要素自体の垂直位置を直接操作することは基本的にはできません。ここが大きな違いのひとつです。
このように違いを整理しておくと、ページを組み立てるときにどの属性を使えば良いかがすぐに判断できます。
次のセクションでは具体的な使い方や注意点を詳しく見ていきます。

何が違うのか？どこで使うのかを見極めるコツ

text-align と vertical-align はよく間違われがちですが、それぞれ使える場面が違います。text-align はブロック内の横方向の揃え、vertical-align は同じ行の要素やセルの垂直揃えに向いています。例えばヘッダの文字を中央に揃えたいときは text-align: center を使います。セクションの背景が横に長い場合、段落の文字を中央に揃えるだけで読みやすさが変わります。
一方、アイコンとテキストを並べた横一列の中でアイコンだけ縦方向がずれて見える場合には vertical-align: middle; を使い、必要なら line-height や display の設定も組み合わせると良いです。ここを混同すると、思っていた位置と違う見た目になってしまうので注意しましょう。

実例で見る使い分けのポイント

実際の例で見てみると、text-align は段落の文字を左右に揃えるのに使い、vertical-align はインライン要素やセルの垂直位置を揃えるのに使うという基本が分かります。例えば次のような場面です。
1) ブロック要素の内部で文字を中央に揃えたい時 → text-align: center;
2) 画像と文字を同じ高さで横並びにしたいが、画像だけ縦方向がずれて見える時 → vertical-align: middle; を適用し、必要なら他の設定と組み合わせる。
3) 表のセル内で文字を上下中央に揃えたい時 → vertical-align: middle; をセルに適用する。これらの考え方を覚えると、デザインの幅が広がります。

実例の具体的な使い方のポイント

実務では text-align を使って段落全体の読みやすさを高めるケースが多く、vertical-align は表やアイコン付きの横並びなど、垂直方向の整列が重要な場面で活躍します。例えばヘッダ内のリンクを中央寄せにする場合は text-align を使い、リストアイコンと文字を縦方向でぴったりそろえたい場合は vertical-align を使います。
さらに本格的なレイアウトでは consider させる要素の display を block から inline-block や table-cell に切り替え、vertical-align や margin との組み合わせで微妙な位置合わせを行います。こうした組み合わせを覚えると、単純な見た目だけでなく、デザインの幅がぐっと広がります。

機能	text-align	vertical-align
適用対象	ブロック要素内の text 内容	inline 要素または table-cell
主な効果	水平方向の揃え	垂直方向の揃えが主目的
実用のコツ	段落や見出しの横方向の揃えを整える	アイコンと文字の垂直整列や表セルの垂直整列に使う

ピックアップ解説

text-align の話題を友だちと雑談するなら、こう言えるかもしれません。横方向の揃え方は text-align、縦方向は vertical-alignと覚えておくと、いざ CSS を書くときに迷いにくいんです。ある日、学校のプリントをウェブに貼り付ける話をしていたとき、友だちは「文字を中央に揃えたいんだけど、どの属性を使うの？」と聞いてきました。私はすぐに text-align: center が適している場面だと答えました。すると友だちは「でも画像と文字を並べた列の中心をそろえたいときは？」と再質問。そこで私は vertical-align: middle の出番だと説明しました。こうして、実際の場面を想像しながら分けて考えると、CSS の用語が遠く感じなくなります。さらに、垂直揃えが必ずしも div に効くわけではない点にも注意が必要です。ブロック要素の高さを直接揃えたいときには他の方法（flexbox など）を使うのが基本です。友だちと話す感覚で、日常の問題解決に CSS をどう使うかを考えると、学習が楽しくなるはずです。

---