vertical-alignとは？CSSで縦の揃え方を初心者にもわかる解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

vertical-alignとは？

vertical-align は CSS のプロパティのひとつで、横に並ぶ要素を縦方向にずらして整列させるために使います。ポイントは「インライン要素や inline-block 要素、テーブルセルに対して効果がある」という点です。デフォルト値は baseline（基準線に揃える）で、テキストの基準線に対して要素が揃います。

基本的な使い方のイメージ

たとえば、アイコンと文字を横並びにしたとき、アイコンの縦の位置を文字の中心に合わせたい場合に vertical-align を使います。ただしブロック要素には通常効果がありません。その場合は display: inline-block を使うか、他の方法を検討します。

主な値と意味

値	意味	使い方のポイント
baseline	デフォルト。行の基準線に揃う	通常はこのままで問題ないことが多い
middle	文字の高さの中央に揃える	アイコンと文字を中央にそろえたいときに有効
top	要素の上端を揃える	テキストとの上端をそろえたいときに使う
bottom	要素の下端を揃える	下端をそろえたいときに使う
text-top	文字の上端に揃える	行内の文字の上端と合わせたいときに便利
text-bottom	文字の下端に揃える	文字のほかの部分と整えたいときに活用

補足として、vertical-align は相対値（%）や長さ（px など）でも指定可能です。例えば vertical-align: 5px; といったように、微妙な位置調整ができます。ただし単位を持つ値は、要素の line-height や周囲の高さと合わせて使うと効果が分かりやすくなります。

実践的な使い方の例を、イメージで伝えます。この行のアイコン★ が、文字と同じ高さになる様子を想像してください。

よくある間違いと対策

間違い1: ブロック要素に vertical-align を適用してしまう。対策: display: inline-block または inline 要素に変更する。

間違い2: 親要素の line-height が大きすぎて効果が分かりにくくなる。対策: line-height を適切に設定する。

実務でのヒント

ブラウザ互換性については、vertical-align は長い間サポートされており、現代のブラウザで問題なく動作します。新しい CSS レイアウトが増えていますが、細かな微調整にはまだ有効です。アイコンと文字の見た目を揃えると、UI の可読性が高まります。

まとめ

vertical-align は、横並びの要素の縦位置を微調整するための強力な道具です。使い方が分かれば、アイコンと文字の揃え、表のセルの揃え、テキストの読みやすさ改善などに活用できます。初心者のうちは、まず baseline と middle を試して、実際の見た目を見ながら調整してみましょう。

vertical-alignの関連サジェスト解説

vertical-align bottom とは: vertical-align bottom とは、CSS のvertical-alignというプロパティの値の一つで、インライン要素やテーブルセルの垂直方向の揃え方を指定します。bottom を指定すると、要素の下端をその行のラインボックスの底辺に合わせて配置します。つまり、テキストの中にある画像やアイコンの下端を、周りの文字の底と合わせて見えるように調整できます。ここで重要なのは、vertical-align が適用される対象が inline 要素や display: inline-block、あるいは table-cell の要素である場合にのみ効果がある点です。ブロックレベルの要素には基本的に適用されません。使い分けとしては、画像やアイコンを文字と同じライン上で下端をそろえたいときに有効です。bottom の他にも top、middle、baseline などの値があり、それぞれ揃え方が異なります。実務でよくあるケースは、ウェブページの本文中に挿入した小さなアイコンを、文字の底辺に合わせて見た目を揃えることです。これを実現するには一般的に「display: inline-block; vertical-align: bottom;」と書くパターンが多いです。なお、line-height が大きく設定されていると見た目が変わることがあるため、他のレイアウト調整手段（例えば padding や margin、あるいは flexbox・grid の alignment）と併用する場合は結果を必ず確認しましょう。ブラウザの解釈の違いはほとんどありませんが、画像の大きさやフォントの高さによってはわずかなずれが生じることがあります。まとめとして、垂直揃えをシンプルに実現したいときには vertical-align bottom を試してみると良いでしょう。
vertical-align middle とは: vertical-align middle とは、CSS の長い名前の中の値のひとつで、inline 要素や inline-block 要素を行の高さの中央に縦方向で揃える機能です。特に画像と文字を横に並べたとき、アイコンの上下の揃い方がずれて見えることがありますが、vertical-align: middle; を付けると見た目がすっきり整います。使い方はとても簡単で、CSS の対象要素に vertical-align: middle; と書くだけです。例えば、画像タグやアイコンの周りにテキストがあるときにこの値を追加すると、中心が文字の中心と近くなる感覚を得られます。この値の動きは「行ボックスの中心と要素の中心を合わせる」というイメージです。ただし、効果は線の高さ(line-height)や親要素の設定に左右されます。line-height を適切に設定する、あるいは display を inline-block にすると、効果を確認しやすくなります。注意点として、vertical-align はブロック要素には通常効果がありません。主に inline 要素や inline-block 要素、あるいは display: table-cell の要素に対して働きます。実務では、アイコン付きのボタンやテキストと画像を揃えたいときに役立ちます。しかし、完全に中央揃えを目指すなら Flexbox の align-items: center や Grid の align-items など、現代的な方法を使うのがおすすめです。まとめとして、vertical-align middle とは inline/inline-block 要素を行の高さの中央に揃えるための値です。使い方は簡単ですが、線の高さや親要素の設定次第で見え方が変わるので、実際に写真（関連記事：写真ACを三ヵ月やったリアルな感想【写真を投稿するだけで簡単副収入】）と文字を並べて確認しながら使うと理解が深まります。
vertical-align baseline とは: vertical-align baseline とは、CSS の中でも縦方向の揃え方を決めるプロパティ vertical-align の値のひとつです。主に inline 要素や inline-block、表のセル（table-cell）に対して使います。縦方向の揃え方を指定する値には baseline、middle、top、bottom などがあり、baseline は文字の基準線に合わせる設定です。基準線とは何かを簡単にいうと、文字が座っている想像上の水平線のことです。英字なら文字の下の線、日本語の文字も同じく文字が置かれている“地面”のようなラインです。inline 要素はこの基準線を起点に縦方向の位置が決まり、vertical-align: baseline を指定すると要素の基準点がその基準線に揃います。実際の動きとしては、画像と文字を並べたときなどに使います。例えば画像を text の横に置くとき、vertical-align: baseline を設定すると画像の下端が文字の基準線に揃います。逆に vertical-align: middle を使えば要素の中央が基準線の位置に来る感じです。なお line-height を大きくすると、基準線と要素の見た目の位置関係が変わるため、同じ baseline でも見え方が変わることがあります。注意点として、vertical-align はインライン要素と table-cell にしか影響しません。ブロックレベルの要素には通常適用されず、テキストの高さや行間を変えたいときは line-height や display の設定を別に調整します。
vertical-align top とは: vertical-align top とは CSS の垂直方向の揃え方のひとつで、特にインライン要素や table-cell に対して使われます。top を指定すると、要素の上端が現在の行ボックスの上端に揃います。つまりテキストと画像が横に並んでいるとき、vertical-align: top を持つ要素は行ボックスの上端に合わせて上側がそろいます。これにより上部の揃いが整い、見た目がスッキリします。使い方のコツは、表示を横並びにしたい要素に対して inline-block や table-cell を設定し、そのうえで vertical-align を top にすることです。例えばアイコンや小さな写真と文章を並べる場面で効果を感じやすいです。反対の値には middle や bottom などがあり、それぞれ要素の中間点や下端を揃えます。なお vertical-align はブロック要素には基本的に効かず、縦方向のレイアウトを直したいときはフレックスやグリッドなどの別の方法を使うのが確実です。
css vertical-align とは: css vertical-align とは、ウェブページ上で文字と画像などを縦方向に揃えるための CSS プロパティです。主に inline 要素や display: inline-block の要素に対して作用し、行内の基準線に対して垂直方向の位置を動かします。デフォルト値は baseline（基準線）で、要素を少し上げたり下げたりして、テキストと整列させることができます。代表的な値には top、bottom、middle、text-top、text-bottom、sub、super のほか、長さ（px など）や割合（%）も使えます。これらの値は line-height やフォントの高さに対して相対的に作用するので、文字の大きさが変わると見え方も変わることを覚えておくと良いでしょう。使い方のコツ- 対象は基本的に inline 要素と display: inline-block の要素です。ブロック要素には通常は影響しません。- 画像と文字を横並びにしたとき、アイコンの垂直位置を middle または text-middle のような値に揃えると、見た目がきれいに揃います。- 文字間や行間が大きいと、同じ vertical-align の値を使ってもずれ方が変わることがあります。必要に応じて line-height も調整してください。- 現代的な縦揃えには Flexbox や CSS Grid などのレイアウトシステムを使うと、確実に揃えられる場面が増えます。vertical-align は小さな調整や特定のケースで便利なツールです。注意点- vertical-align は inline 行のボックスに対して働く性質があるため、ブロック要素に適用しても期待通りには動かないことがあります。- テキストの基準線や x-height などフォントに依存する要因があるため、複数のブラウザやフォントで見え方が異なることがあります。- 画像だけを縦揃えしたい場合は、親要素の line-height を調整したり、flexbox で縦方向の揃えを行う方法も検討してください。応用のヒント- ナビゲーションのアイコンとテキストを横並びにしたとき、vertical-align を使ってアイコンを文字の中央付近に揃えると、統一感が生まれます。- ボタン内のアイコンと文字の高さを合わせたい場合にも vertical-align は役立ちます。特に sub/super を使った表現と組み合わせると、見た目のバランスが取りやすくなります。まとめcss vertical-align とは、 inline 要素や inline-block 要素の縦方向の揃え方を決める基本的なツールです。 baseline を基準として top、bottom、middle などの値を使い分けることで、テキストとアイコンを自然に整列させることができます。とはいえ、複雑なレイアウトには Flexbox や Grid を使う場面が増えるため、vertical-align は小さな微調整として覚えておくと良いでしょう。

vertical-alignの同意語

垂直揃え: 縦方向の揃えを指す一般的な表現。inline要素やテーブルセルの縦位置を合わせる概念を示します。
縦方向揃え: 縦方向の揃え方を表す表現。要素を縦にそろえる意味合いです。
縦揃え: 縦方向の揃えを表す短い表現。行内ボックスの縦位置をそろえることを指します。
垂直配置: 要素を縦方向に配置・整列させることを指す言い回しです。
縦方向の整列: 縦方向に要素を整列させることを意味します。
縦整列: 縦方向の並べ方・位置の整列を指します。
ベースライン揃え: 文字の基準線（ベースライン）に合わせて揃えることを指す表現です。
ベースライン整列: ベースラインを基準に要素を整列させる意味です。
縦方向の中央揃え: 縦方向の中央に要素を配置することを指します。
中央揃え: 縦方向の中心に揃えることを意味します。文書全体の垂直中央寄せを指すこともあります。
上揃え: 上端に揃えること。上寄せに相当する縦方向の配置を指す表現です。
下揃え: 下端に揃えること。下寄せに相当する縦方向の配置を指す表現です。

vertical-alignの対義語・反対語

水平揃え: 水平方向に要素を整列させる概念。vertical-align が縦方向の配置を扱うのに対して、水平揃えは横方向の揃えを指します。ブロック内のテキストや要素の左右位置を揃えるイメージです（例として text-align の挙動を想像すると分かりやすいです）。
上端揃え: 垂直方向の上端を基準に揃えること。vertical-align の top に対応します。要素の上部をラインの上部にそろえるイメージです。
下端揃え: 垂直方向の下端を基準に揃えること。vertical-align の bottom に対応します。要素の下部をラインの下部にそろえるイメージです。
中央揃え: 垂直方向の中心に揃えること。vertical-align の middle に対応します。要素を行の中心に位置させるイメージです。
基線揃え: 要素の基線（文字の基準となる線）を揃えること。vertical-align の baseline に対応します。本文のベースラインにあわせるイメージです。
文字の上部揃え: テキストの上部を揃えること。vertical-align の text-top に対応します。文字の上端を揃える感覚です。
文字の下部揃え: テキストの下部を揃えること。vertical-align の text-bottom に対応します。文字の下端を揃える感覚です。
上付き文字: 通常のラインより上の位置に小さく表示される文字。vertical-align の super に対応します。数式や注釈で使われることが多い表現です。
下付き文字: 通常のラインより下の位置に表示される小さな文字。vertical-align の sub に対応します。化学式などで下付き文字を使う場面を想像してください。

vertical-alignの共起語

ベースライン: テキストの基準となる水平線。行ボックスの基準位置として使われ、要素を他の要素と縦方向に揃える際の基準になる。
中央揃え: vertical-align: middle の値。行ボックスの中央に要素を垂直に揃える。
上揃え: vertical-align: top の値。要素を行ボックスの上端に揃える。
下揃え: vertical-align: bottom の値。要素を行ボックスの下端に揃える。
テキストの上端: vertical-align: text-top の値。文字の上端を基準に揃える。
テキストの下端: vertical-align: text-bottom の値。文字の下端を基準に揃える。
上付き文字: vertical-align: sub の値。テキストを下に小さく表示する。
下付き文字: vertical-align: super の値。テキストを上に小さく表示する。
インライン要素: vertical-align は主に inline 要素に対して適用され、行ボックス内での位置を変える。
インラインブロック: display: inline-block の要素にも vertical-align が適用され、縦方向の揃えに影響する。
テーブルセル: display: table-cell の要素にも適用され、セル内の垂直配置を制御する。
長さ値: vertical-align は長さ（px, em など）で微調整ができる。
割合値: vertical-align は百分率で親要素のサイズを基準に位置を指定できる場合がある。
初期値: デフォルトの設定は baseline（ベースライン）で開始する。
継承: inherit を指定すると親要素の vertical-align を引き継ぐ。
行の高さ: line-height など行の高さと組み合わせて、垂直配置が影響を受けることがある。
ディスプレイ: display プロパティの値によって vertical-align の適用範囲が変化することがある。
ボックスモデル: 要素のマージン・パディング・ボーダー・サイズの関係性により、見た目の垂直配置が変わる。

vertical-alignの関連用語

vertical-align: 要素の垂直位置を指定するCSSプロパティ。主に inline 要素や table-cell の子要素の垂直揃えに使われ、行ボックス内の基準線に対して配置されます。
baseline: 基準線に揃える値。文字の基準線を基準として垂直方向の位置を決め、デフォルトではこの揃え方が使われます。
sub: 下付き文字の位置に配置する値。数式の添え字や脚注などで使われます。
super: 上付き文字の位置に配置する値。指数表記や注釈などで使われます。
middle: 行ボックスの縦方向の中央付近に揃える値。要素の垂直位置を中央寄せに近づけたいときに使います。
top: 行ボックスのトップに揃える値。要素を上部に寄せたいときに使います。
bottom: 行ボックスのボトムに揃える値。要素を下部に寄せたいときに使います。
text-top: 文字の上端を基準に揃える値。主に文字の上端をそろえたい場合に使います。
text-bottom: 文字の下端を基準に揃える値。文字の下端をそろえたい場合に使います。
length: px, em, rem などの長さを指定して、垂直位置を具体的に設定します。
percentage: 行ボックスの高さに対する割合で垂直位置を設定します。
inline: display: inline の要素。vertical-align が適用される主な対象です。
inline-block: display: inline-block の要素。vertical-align の効果を受けます。
table-cell: display: table-cell の要素。vertical-align の適用対象として扱われます。
line-height: 行の高さを決めるプロパティ。vertical-align の見え方に影響することがあります。
display: 要素の表示モードを決めるプロパティ。vertical-align は主に inline 要素や table-cell で効果を発揮します。
align-items: Flexbox の縦方向の揃え方を決めるプロパティ。vertical-align とは異なり、Flexbox で使われます。
text-align: 水平方向の揃え方を決めるプロパティ。vertical-align とは別の指標ですが、横揃えと縦揃えは合わせて理解すると便利です。