CSSのvertical-alignが効かない原因と対処法【初心者向け】現役デザイナーが解説

CSSのvertical-alignが効かない原因について解説します。vertical-alignはインライン要素の縦の位置を揃える場合などに使用します。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

目次

• vertical-alignが効かない原因
• vertical-alignを使用する場面
• vertical-alignの書き方
• 実際に書いてみよう

本記事は、テックアカデミーのWebデザインコースのカリキュラムをもとに執筆しています。

 

 

vertical-alignが効かない原因

vertical-alignは、「インライン要素」または、「テーブルセル」のみに適用できるCSSプロパティです。

「CSSにvertical-alignを書いたのに、全く効かない！」という場面に遭遇したら、適用している要素が、何の要素であるかに注目してみてください。

 

vertical-alignが適用できる要素の例

• <a>、<span>、<strong>、<small>などのインライン要素
  （CSSでdisplay:inline;または、display:inline-block;を適用している要素）
• <td>、<th>などのテーブルセル要素
  （CSSでdisplay:table-cell;を適用している要素）

ブロック要素に対して、縦方向の位置を揃えたい場合には、vertical-align以外の方法を使います。

こちらの記事も参考にしてみてください。

CSSで上下中央揃えの仕方を現役エンジニアが紹介【初心者向け】

 

[PR] Webデザインで副業する学習方法を動画で公開中

vertical-alignを使用する場面

vertical-alignは大きな文字と小さな文字が混在するテキストや、文中に画像を使用する場合などに、縦方向の位置調整に使用されることが多いです。

また、テーブルセル要素で使用する場合には、セルの中での縦方向の整列位置の調整、インライン要素の場合は、行（または親要素）に対して縦方向の整列位置の調整を行います。

 

vertical-alignの書き方

vertical-alignの値は、top、middle、bottomなどのキーワードや、%、その他pxやemなどの単位での指定も可能で、以下のように書きます。

 

vertical-align:top; /* 上で揃える */
vertical-align:middle; /* 中央で揃える */
vertical-align:bottom; /* 下で揃える */
vertical-align:100px;  /* 10px上へ移動 */
※％や単位での指定は、テーブルセルには適用できません。

 

表示の例：

 

 

 

画像に対して適用した場合：

 

 

 

実際に書いてみよう

文中に注釈のあるテキストの注釈の縦方向の整列位置を調整してみます。

HTML

<p>vertical-alignはインライン要素<span>（※注1）</span>または、テーブルセル<span>（※注2）</span>に対して適用できます。</p>

 

CSS

span{
  font-size:.5em;
  color:red;
}

vertical-alignを書かない場合（初期値）は以下のような表示になります。

次に注釈の文字を行の上端に揃えてみます。

CSS

span{
font-size:.5em;
color:red;
vertical-align:top;
}

表示結果：

注意点は、top、middle、bottomは行の高さに対して適用される点です。

<p>の行の高さ（line-height）が変わると、注釈の位置も変わります。

CSS

p{
  line-height:3;  /*行の高さを文字の高さの3倍*/
}
span{
  font-size:.5em;
  color:red;
  vertical-align:top; 
  line-height:1;  /*行の高さは文字の高さと同じ*/
}

表示結果：

行の高さの上端に注釈の文字が整列されるので、文章の文字自体の高さよりも上に飛び出て見えます。

文章の文字自体の高さに合わせたい場合は、以下のように書きます。

 

vertical-align:text-top; /* 親要素のテキストの上端で整列 */
vertical-align:text-bottom; /* 親要素のテキストの下端で整列 */ 

表示結果：

 

※text-top、text-bottomの値はテーブルセルでは使用できません。

 

次に、テーブルセルの縦方向の整列位置を調整してみます。

HTML

<table>
  <tr>
    <td>デフォルト</td>
    <td class="top">上揃え</td>
    <td class="middle">中央揃え</td>
    <td class="bottom">下揃え</td>
  </tr>
</table>

CSS

td{
  width:10em;
  height:5em;
  background:gold;
}
.top{
  vertical-align:top;
}
.middle{
vertical-align:middle;
}
.bottom{
vertical-align:bottom;
}

 

表示結果：

表示結果からも分かるように、テーブルセルの場合、何も指定しない場合は中央揃えになります。

また、テーブルセルの高さに対して整列位置を調整するため、セル自体の高さが設定されている必要があります。

また、テーブルセルではvertical-alignの値は、top、middle、bottom、baselineのみが使用できます。

 

vertical-alignでは、様々なキーワードで縦方向の整列位置を調整することができます。

それぞれ整列する位置がの基準が親要素だったり、行の高さだったりと、言葉で説明するとややこしく感じるプロパティです。

実際にいろんな場面で、vertical-alignの様々な値を適用してみて、違いを体感してみるのがわかりやすいと思います。

監修してくれたメンター

橋本真理 フリーのWeb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。 テックアカデミーではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。

 

大石ゆかり

CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

CSSを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！