CSS vertical-alignの使い方テキスト縦方向の位置変更向の位置を変更する方法を紹介!

CSS

【CSS vertical-alignの使い方】テキストの縦・上下方向の位置変更

2022年9月4日

今回は行内やセル内の縦方向の位置を変更することができるCSSプロパティ、vertical-alignの使い方やよく使用される値を紹介します。

vertical-alignを使用してインライン画像とテキストの揃え位置を指定している

 

 

 

vertical-alignプロパティとは?

vertical-alignは、インライン(例: テキスト、画像など)要素、インラインブロック要素の垂直・縦方向の位置を指定するのに使用されるCSSです。

高さの異なるインライン画像とテキストを横一列に並べた時、両者の揃え位置を指定したい場合などに、vertical-alignプロパティが使用されます。

vertical-alignを使用してインライン画像とテキストの揃え位置を指定している

なお、vertical-alignプロパティを適用できるのは、インライン(インラインブロック)要素とテーブルセルのみで、ブロックレベル要素には適用できないため注意が必要です。

■vertical-alignの使用場面

  • インライン要素の中で、テキストや画像などの垂直方向の位置を決めるとき
  • テーブルセルの中身の垂直方向の配置を決めるとき

 

 

vertical-alignプロパティでよく使用される値一覧

それではここからはvertical-alignプロパティでよく使用される値や、その意味を紹介していきます。

■vertical-alignで使用できる値

baseline(初期値) 適用した要素のベースラインと親要素のベースラインを揃える
top 要素と子孫要素の上端を行全体の上端に揃える
middle 半角英字の「x」の中央の高さに要素が揃う
bottom 要素と子孫要素の下端を行全体の下端に揃える
text-top 親要素のフォントの上端に要素の上端を揃える
text-bottom 親要素のフォントの下端に要素の下端を揃える
数値+単位 数値と単位(px、%など)を使って位置の調整をすることができる

vertcal-alignプロパティで指定できる値の表示例

 

1. baseline(初期値):適用した要素のベースラインと親要素のベースラインを揃える

まず1つ目の値は、baselineです。

こちらの値は指定することで、適用した要素のベースラインと親要素のベースラインを揃えることができます。

baselineを指定している例

ブロックレベル要素(divタグ)に対して、vertical-alignを設定するわけではないので注意しましょう。

なおベースラインとは、アルファベットの大文字の底辺が接する直線のことを言います。

ベースラインを解説した図

引用元:Baseline (typography) | WIKIPEDIA

 

2. top:要素と子孫要素の上端を行全体の上端に揃える

2つ目の値は、topです。

こちらの値は指定することで、要素と子孫要素の上端を行全体の上端に揃えることができます。

vertical-align: topを指定している例

 

3. middle:半角英字の「x」の中央の高さに要素が揃う

3つ目の値は、middleです。

こちらの値は指定することで、半角英字の「x」の中央の高さに要素が揃うようになります。

vertical-align: middleを指定している例

vertical-align: middleを指定している例

 

4. bottom:要素と子孫要素の下端を行全体の下端に揃える

4つ目の値は、bottomです。

こちらの値は指定することで、要素と子孫要素の下端を行全体の下端に揃えることができます。

vertical-align: bottomを指定している例

 

5. text-top:親要素のフォントの上端に要素の上端を揃える

5つ目の値は、text-topです。

こちらの値は指定することで、親要素のフォントの上端に要素の上端を揃えることができます。

vertical-align: text-topを指定している例

 

6. text-bottom:親要素のフォントの下端に要素の下端を揃える

6つ目の値は、text-bottomです。

こちらの値を指定することで、親要素のフォントの下端に要素の下端を揃えることができます。

vertical-align: text-bottomを指定している例

 

7. 数値+単位:数値と単位(px、%など)を使って位置の調整をすることができる

7つ目の値は、「数値+単位」です。

こちらの値を指定することで、具体的な数値と単位(px、%など)を使って位置の調整をしてあげることができます。

前述したように、「vertical-align: middle;」を指定した場合、半角英字の「x」の中央の高さに要素が揃うようになるため、日本語文字や全角文字の中央に要素を配置することはできません。

そこで日本語文字や全角文字の中央に要素を配置したい場合は、pxなどの単位を使った方法で指定してあげると良いです。

日本語文字や全角文字の中央に要素を配置したい場合は、「数値 + 単位」の方法で指定すると良い

こうしてあげることで、ベースラインを0として、正の値なら上方向、負の値なら下方向に要素を移動させることができます。

 

 

vertical-alignが効かないよくある理由

vertical-alignは特に「指定がうまく効かない」となりやすいプロパティの1つです。

そこで、最後にvertical-alignが効かないよくある理由を紹介します。vertical-alignを使用しても指定がうまく効かない方は、以下の2点を確認してみましょう。

■vertical-alignが効かないよくある理由

  1. ブロック要素に対して指定している
  2. ボックスの中での上下中央寄せ目的で使用している

 

1. ブロック要素に対して指定している

まず1つ目は、ブロック要素に対して指定していないかどうかを確認しましょう。

vertical-alignプロパティはインライン(インラインブロック)要素とテーブルセルに対してのみ適用可能で、ブロックレベル要素には使用できません。

vertical-alignが効いていない例

そのため、上のようにpタグに「vertical-align: middle」を指定しても指定が通りません。

 

2. ボックスの中での上下中央寄せ目的で使用している

2つ目は、ボックスの中での上下中央寄せ目的などで使用していないかを確認しましょう。

ここが1番勘違いをされやすい点だと思うのですが、vertical-alignはインライン(インラインブロック)要素同士の位置関係を調整するためのプロパティであって、ボックスの中での上下の配置を指定するためのプロパティではありません

■vertical-alignの正しい使用例

vertical-alignの正しい使用例

そのため、vertical-alignを使って、以下のようにボックスの中で要素を上下中央寄せにしようとガンバってもうまくいきません。

vertical-alignを使ってボックスの中で要素を上下中央寄せにすることはできない

ただし、テーブルセルの中では「vertical-align: middle」の指定で上下中央寄せ、「top」「bottom」で上寄せ、下寄せにすることが可能です。

テーブルセルに対してvertical-alignプロパティを指定している例

 

 

まとめ

まとめです。今回はCSSプロパティの1つ、vertical-alignの使い方や使用できる値について紹介しました。

vertical-alignを使用してインライン画像とテキストの揃え位置を指定している

テキストやアイコン画像の垂直方向の位置を調整したり、テーブルセルの垂直方向の配置を指定したいときなどにするので覚えておきましょう。

今回は以上になります。最後までご覧頂き、ありがとうございました。


 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS