CSS

vertical-alignとは?CSSで要素の縦の位置を指定する方法

vertical-alignプロパティって何?

vertical-alignの概要

vertical-alignはインライン要素及びテーブル要素の縦の位置を揃えるcssプロパティです。インライン要素の①は行のボックスの範囲です。②は親要素のテキストの範囲です。"Text"は親要素、"baseline"は子要素になっています。

  • インライン要素にvertical-alignプロパティを適用する場合
    • baselineを基準値として、vertical-alignの値をbaseline~taxt-bottomのうちどれかを指定し、子要素の縦の位置を指定する事ができます
  • テーブル要素にvertical-alignプロパティを適用する場合
    • baseline=topを基準値として、vertical-alignで値baseline,top,middle,bottomを指定し、td要素の縦の位置を指定する事ができます

基本の書き方 vertical-align : 値;

vertical-align書き方

{ vertical-align : 値 ;}

cssファイルでhtmlの対象タグに対してvertical-align:値;を指定するだけで縦の位置を指定する事ができます。値としてはbaseline, top, middle, bottom, super ,sub, text-top, text-bottom,auto...などがあります。

インライン要素で指定する書き方

web表示

vertical-alignでtopを指定

.class2{vertical-align:top;}

ポイント

  • HTML側で親要素<p>タグで"Text"を表示。入れ子にして子要素<span>でTopを表示。
  • CSS側で子要素<span>タグに対してvertical-align:top;を指定。
 html
<body>
<p class="class1">Text
<span class="class2">top</span>
</p>
</body>
 css
/*親要素のフォントサイズを40pxに指定*/
.class1{
font-size:40px;
}
/*子要素のvertical-alignをtopに指定
フォントサイズを20pxに指定*/
.class2{
vertical-align:top; fontsize:20px;}

テーブル要素で指定する書き方

Web表示

vertical-alignでtopを指定した場合

 テーブル要素でvertical-align

 html
<body>
<table>
<tr>
<td class="class1">Top</td>
<td class="class2">Middle</td>
<td class="class3">Bottom</td>
</tr>
</table>
</body>

ポイント

  • HTML側でテーブル<table><tr>タグで表を指定。入れ子にして子要素列<td>を指定。
  • CSS側で子要素<td>タグに対してvertical-alignを1列目top、2列目middle,3列目bottom指定。

 

 

 css
/* topは行全体の上端を指す。*/
.class1{
vertical-align:topborder:solid; width:100px; height:120px;  }
/*要素と子孫要素の下端を指す*/
.class2{
vertical-align:middle; border:solid; width:100px; height:120px; }
/*要素と子孫要素の下端*/
.class3{
vertical-align:bottom; border:solid; width:100px; height:120px;  }
CSS borderの使い方を理解してデザインの幅を広げよう!

続きを見る

vertical-alignで指定できる値一覧

🔹vertical-alignの値 🔹意味 テーブル要素での使用
baseline 親要素のベースライン
top 行全体の上端
middle 行全体の中間
bottom 行全体の下端
super 親要素の上付き文字位置 ×
sub 親要素の下付き文字位置 ×
text-top 親要素の上端 ×
text-bottom 親要素の下端 ×
数値px baselineを基準として数値pxで指定した長さ分だけ上下移動
数値% baselineを基準の0としてline-heightの値に%の数字をかけた長さ上下移動
auto 自動的に適した位置を表示。基本的には親要素のベースライン ×

top

web表示

vertical-alignでtopを指定した場合

{vertical-align:top;}

ポイント

  • 行のボックスの上端に合わせて表示される。
 html
<body>
<p>Parent<span>child</span></p>
</body>

 css
p { font-size:40px; }
span { vertical-align:top; font-size:10px; }

 

middle

web表示

vertical alignでmidddleを指定

{vertical-align:middle;}

ポイント

  • 行のボックスの中央に合わせて表示される。
 html
<body>
<p>Parent<span>child</span></p>
</body>

 css
p { font-size:40px; }
span { vertical-align:middle; font-size:10px; }

bottom

web表示

vertical-alignでbottomを指定した場合

{vertical-align:bottom;}

ポイント

  • 行のボックスの下端に合わせて表示される。
 html
<body>
<p>Parent<span>child</span></p>
</body>

 css
p { font-size:40px; }
span { vertical-align:bottom; font-size:10px; }

super

web表示

vertical-alignでsuperを指定した場合

{vertical-align:super;}

ポイント

  • 上付き文字の決められた位置で表示される。
 html
<body>
<p>Parent<span>child</span></p>
</body>

 css
p { font-size:40px; }
span { vertical-align:super; font-size:10px; }

sub

web表示

vertical-alignでsubを指定した場合

{vertical-align:sub;}

ポイント

  • 付き文字の決められた位置で表示される。
 html
<body>
<p>Parent<span>child</span></p>
</body>

 css
p { font-size:40px; }
span { vertical-align:sub; font-size:10px; }

text-top

web表示

vertical-alignでtext-topを指定

{vertical-align:text-top;}

ポイント

  • 親要素の上端に合わせて表示される。
 html
<body>
<p>Parent<span>child</span></p>
</body>

 css
p { font-size:40px; }
span { vertical-align:text-top; font-size:10px; }

text-bottom

web表示

{vertical-align:text-bottom;}

ポイント

  • 親要素の下端に合わせて表示される。
 html
<body>
<p>Parent<span>child</span></p>
</body>

 css
p { font-size:40px; }
span { vertical-align:text-bottom; font-size:10px; }

数値pxで指定

web表示

vertical-align数値で指定する

{vertical-align:数値px;}

ポイント

  • baselineを基準の0とする。
  • +数値で指定した場合、数値px分だけ上に表示される。
  • -数値で指定した場合、数値px分だけ下に表示される。
 html
<body>
<p>Parent<span>child</span></p>
</body>

 css
p { font-size:40px; }
span { vertical-align:-20px; font-size:10px; }

相対値%で指定

web表示

vertical-align相対値%で指定する

{vertical-align:相対値%;}

ポイント

  • baselineを基準の0とする。
  • line-heightプロパティの行ブロックの高さを基準値として参照する。
  • +数値で指定した場合、”数値×lineプロパティの高さ分だけ上に表示される。
  • -数値で指定した場合、”数値×lineプロパティの高さ分だけ下に表示される。
 html
<body>
<p>Parent<span>child</span></p>
</body>

 css
p { font-size:40px; }
span { vertical-align:-100; font-size:10px; }

auto

web表示

vertical-alignでautoで指定する場合

{vertical-align:auto;}

ポイント

  • Webブラウザが自動的に適した位置を判断して表示
  • 基本的には親要素のベースラインに合わせて表示される。
 html
<body>
<p>Parent<span>child</span></p>
</body>

 css
p { font-size:40px; }
span { vertical-align:auto; font-size:10px; }

vertical-alignが効かない

vertical-alignが効かない場合、次のような状況が考えられます。

  • テーブル要素で高さheightが指定されていない。
  • 親要素にvertical-alignを指定している。
  • インライン要素やテーブル要素でvertical-alignを指定している。

vertical-alignが効かない時の対処法

vertical-alignが効かない場合の対処法を紹介していきます。

テーブル要素で高さheightが指定されていない

テーブル要素で高さheightが設定されていないと、写真のように充分な高さの余白が確保されずvertical-alignが適用されません。このような場合はheightで高さを指定して十分な余白を設定しましょう。

vertical-alignが効かない場合

 

 

 html
<body>
<table><tr>
<td class="class1">Top</td>
<td class="class2">Middle</td>
<td class="class3">Bottom</td>
</tr></table>
</body>
 css.class1{height:120px;  vertical-align:top; border:solid; width:100px;}
.class2{height:120px; vertical-align:middle;  border:solid; width:100px; }
.class3{height:120px; vertical-align:bottom;  border:solid; width:100px; }

親要素にvertical-alignを指定されている

テーブル要素でvertical-alignが効かない場合

vertical-alignを親要素に対して指定している場合は縦の位置が指定できません。子要素に対してcssでvertical-alignを指定しているか確認しましょう。

インライン、テーブル以外での指定

vertical-alignはインライン要素、テーブル要素以外では使用する事ができません。vertical-alignをインライン要素、テーブル要素に指定しているか確認しましょう。

まとめ

vertical-alignの使い方を紹介しました。vertical-alignはインライン要素、テーブル要素の縦の位置を指定する事ができるcssプロパティです。vertical-alignはtop,middle,bottom以外に数値でも指定する事ができるので縦の位置を自由に指定する事ができます

vertical-alignを使いなすことによってWebデザインで細かな縦の位置を調整の自由度が上がります。

CSS overflowとは?はみ出し部分の表示を指定する方法

続きを見る

-CSS
-

© 2021 OWLVIEW Powered by AFFINGER5