【CSS】text-align・vertical-align の使い方｜文字や要素の揃え方を横・縦で解説

文字や要素の「揃え方」を指定するプロパティに text-align と vertical-align があります。名前が似ていて混同しやすいのですが、text-align は横方向（左右）、vertical-align は縦方向（上下）の位置をそろえるもので、対象や使いどころがはっきり違います。この記事では、それぞれの基本の使い方と、つまずきやすい「効かない」ケースを、触れるデモ付きで整理して解説します。

text-align で横方向の揃えを指定する

text-align は、ブロック要素の中にある行の中身（インラインの内容）を、左右のどちらにそろえるかを指定するプロパティです。段落の文章はもちろん、インライン要素や画像、インラインブロックのボタンなどもまとめて対象になります。よく使う値は次のとおりです。

使い方は、そろえたい内容を持つ親要素に指定します。文字そのものではなく、それを囲む段落や div に付けるのがポイントです。

.title {
  text-align: center; /* 見出しを中央寄せに */
}

.price {
  text-align: right; /* 金額を右にそろえる */
}

下のデモで、同じ文章に left・center・right・justify を指定した違いを見比べてみましょう。justify は行末をそろえるために単語の間隔が自動で広がるため、日本語より英文や長めの文章で効果がはっきり出ます。

<div class="box">
  <p class="l">左揃え（left）のテキストです。</p>
  <p class="c">中央揃え（center）のテキストです。</p>
  <p class="r">右揃え（right）のテキストです。</p>
  <p class="j">両端揃え（justify）にすると、行の右端がそろうように単語の間隔が自動で調整されます。長めの文章で効果がわかります。</p>
</div>

.box {
  font-family: sans-serif;
  padding: 16px;
}

.box p {
  margin: 0 0 8px;
  padding: 8px;
  background: #eef4ff;
}

.l { text-align: left; }
.c { text-align: center; }
.r { text-align: right; }
.j { text-align: justify; }

ブロック要素そのものの中央寄せには使わない

text-align でつまずきやすいのが、「幅を指定した div を中央に置きたいのに動かない」というケースです。text-align: center がそろえるのは、あくまで行の中身（インラインの内容）であって、ブロック要素そのものの位置ではありません。幅を持ったブロック要素を左右中央に置きたいときは、text-align ではなく margin: 0 auto を使います。

.card {
  width: 300px;
  /* ブロック要素自体を中央に置くのは margin auto */
  margin: 0 auto;
}

「中の文字を中央にそろえる」のが text-align: center、「箱そのものを中央に置く」のが margin: 0 auto、と役割を分けて覚えておくと迷いません。

vertical-align で縦方向の揃えを指定する

vertical-align は、同じ行に並ぶインライン要素・インラインブロック・テーブルセルの縦方向の位置をそろえるプロパティです。たとえば大きさの違うテキストとアイコン、テキストと画像を、行の中でどの高さにそろえるかを決められます。よく使う値は次のとおりです。

下のデモでは、テキストの中に大きさの違うバッジ（インラインブロック）を並べ、それぞれに baseline・middle・top・bottom を指定しています。同じ行の中でバッジの高さがどう変わるか見比べてみてください。

<p class="demo">
  テキスト
  <span class="badge base">baseline</span>
  <span class="badge mid">middle</span>
  <span class="badge top">top</span>
  <span class="badge bottom">bottom</span>
  の位置
</p>

.demo {
  font-family: sans-serif;
  font-size: 24px;
  line-height: 2.6;
  padding: 20px;
}

.badge {
  display: inline-block;
  height: 34px;
  padding: 0 8px;
  line-height: 34px;
  font-size: 13px;
  color: #fff;
  background: #007bff;
  border-radius: 4px;
}

/* 親のベースライン（初期値）にそろえる */
.base { vertical-align: baseline; }
/* 行の中央あたりにそろえる */
.mid  { vertical-align: middle; }
/* 行の一番上にそろえる */
.top  { vertical-align: top; }
/* 行の一番下にそろえる */
.bottom { vertical-align: bottom; }

画像の下にできるすき間を消す

vertical-align の実用例として有名なのが、画像の下にできる小さなすき間の解消です。img はインライン要素なので、初期値の baseline ではベースラインにそろえられ、その下（文字の descender ぶん）にわずかな余白が生まれます。これがボックスと画像の間の「謎のすき間」の正体です。画像に vertical-align: bottom（または middle）を指定すると、この余白を消せます。

.thumb img {
  /* 画像下のすき間を消す定番の指定 */
  vertical-align: bottom;
}

なお、画像に display: block を指定してインラインでなくす方法でも同じようにすき間を消せます。まわりの状況に合わせて使い分けましょう。

vertical-align が効かないとき

もっとも多いつまずきは、ブロック要素の上下中央寄せに vertical-align を使おうとして効かないケースです。vertical-align が対象にするのは、あくまでインライン系の要素とテーブルセルの行内での位置です。div の中にある子要素を上下中央に置きたい、といった用途には効きません。その場合は Flexbox を使い、align-items: center で縦方向をそろえます。

.hero {
  display: flex;
  align-items: center;     /* 縦方向の中央寄せ */
  justify-content: center; /* 横方向の中央寄せ */
  height: 200px;
}

ただし例外として、display: table-cell を指定した要素の中では vertical-align: middle が上下中央寄せとして機能します。テーブルのセル（td）の中身が縦中央にそろうのはこの仕組みによるものです。現在は Flexbox のほうが扱いやすいため、新しく組むレイアウトでは Flexbox を選ぶとよいでしょう。

まとめ

text-align は横方向、vertical-align は縦方向の揃えを指定するプロパティです。text-align は行の中身をそろえるもので、ブロック要素そのものの中央寄せには margin: 0 auto を使います。vertical-align はインライン系・テーブルセルの行内の縦位置をそろえるもので、画像下のすき間消しに便利な一方、ブロック要素の上下中央寄せには使えず、その用途では Flexbox の align-items を使います。「何を対象にしているか」を意識すると、思いどおりに要素を配置できます。

参考ページ

• text-align – CSS: カスケーディングスタイルシート | MDN
• vertical-align – CSS: カスケーディングスタイルシート | MDN