CSS vertical-align値

design/css-vertical-align-values

CSS vertical-align値を一覧表示。

最終更新日 2026-07-03 ・ by yuzlrin

このツールでできること

CSS vertical-align値では、CSS vertical-align値を一覧表示。
関連する観点として CSS vertical-align値、css vertical align、css vertical align values を確認し、結果をコピーして別の作業に使えます。

項目	内容
baseline	ベースライン
top	上
middle	中央
bottom	下
text-top	テキスト上
text-bottom	テキスト下
sub	下付き
super	上付き

使い方

Item 列で baseline、middle、sub、super などの値を確認します。
Content 列で、ベースライン、中央、下付き、上付きといった短い意味を読みます。
アイコンとテキストの位置合わせでは middle や text-top/text-bottom を候補にします。
表セルの上下位置合わせと inline 要素の位置合わせでは効き方が違うため、適用対象も確認します。

入力例・出力例

INPUT

middle

OUTPUT

中央

固定表での説明です。

INPUT

super

OUTPUT

上付き

上付き文字の位置合わせキーワードとして掲載されています。

よくある利用シーン

インラインアイコン、数式風の上付き/下付き、画像と文字の縦位置を調整するとき。
table-cell の縦位置合わせで、top/middle/bottom の候補を確認するとき。
baseline と text-top/text-bottom の名前を短い表で見直すとき。
仕様にある length/percentage ではなく、キーワード値だけを参照したいとき。

結果確認のポイント

生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
CSS vertical-align値、css vertical align、css vertical align valuesの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

CSS vertical-align値の主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

FAQ

よくある質問

このページに入力欄はありますか？

ありません。baseline、middle、text-top、sub、super などの vertical-align キーワードを固定表で表示するだけなので、送信対象になるユーザー入力もありません。

align-middle などのクラスを生成できますか？

いいえ。CSS vertical-align値はキーワードと短い説明を一覧する固定表です。Tailwind の align-middle などへ自動変換する機能やCSS出力欄はありません。

広告は表示されますか？

運営維持のため一部ページに広告を表示していますが、vertical-align の表を読む操作とは独立した領域に配置しています。

関連ツール

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。四隅を連動または個別に動かし、1値または4値のCSSを生成する。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。

Material Elevation

Material Elevationの代表レベルを、単層box-shadow値の固定表で確認できます。

accent-colorが効く要素

CSS accent-colorが反映されるフォーム部品4種を、HTML要素名と用途で確認できます。

CSS角度単位

CSSで使うdeg・grad・rad・turnの角度単位と、1周あたりの基準値を一覧表示します。

animation-direction

CSS animation-directionのnormal・reverse・alternate・alternate-reverseを用途付きで確認できます。

animation-fill-mode

CSS animation-fill-modeの4値を、アニメーション前後のスタイル保持ルールとして確認できます。

CSSアニメーション生成

CSSアニメーションのキーフレームを視覚的に作成・プレビュー。イージング関数の選択、コードのコピーまでワンストップ。

読み込み中...

項目

内容

baseline

ベースライン

top

上

middle

中央

bottom

下

text-top

テキスト上

text-bottom

テキスト下

sub

下付き

super

上付き

使い方

Item 列で baseline、middle、sub、super などの値を確認します。

Content 列で、ベースライン、中央、下付き、上付きといった短い意味を読みます。

アイコンとテキストの位置合わせでは middle や text-top/text-bottom を候補にします。

表セルの上下位置合わせと inline 要素の位置合わせでは効き方が違うため、適用対象も確認します。

よくある利用シーン

インラインアイコン、数式風の上付き/下付き、画像と文字の縦位置を調整するとき。

table-cell の縦位置合わせで、top/middle/bottom の候補を確認するとき。

baseline と text-top/text-bottom の名前を短い表で見直すとき。

仕様にある length/percentage ではなく、キーワード値だけを参照したいとき。

結果確認のポイント

生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。

CSS vertical-align値、css vertical align、css vertical align valuesの観点で、入力内容と出力内容がずれていないか見直してください。

コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

データの扱い / プライバシー

CSS vertical-align値の主要な処理はブラウザ内で実行されます。

入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。

本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

このページに入力欄はありますか？

align-middle などのクラスを生成できますか？

いいえ。CSS vertical-align値はキーワードと短い説明を一覧する固定表です。Tailwind の align-middle などへ自動変換する機能やCSS出力欄はありません。

広告は表示されますか？

運営維持のため一部ページに広告を表示していますが、vertical-align の表を読む操作とは独立した領域に配置しています。