SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.04.16
  • CATEGORY
TITLE

【CSS 】vertical-alignで縦の位置について学ぼう!!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は「【CSS 】vertical-alignで縦の位置について学ぼう!!」の解説です。

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • vertical-alignの使い方について学びたい方へ
  • vertical-alignの書き方について学びたい方へ

vertical-aligntext-alignはよく間違えて覚えることが多いプロパティの一つです。
vertical-alignは縦方向の位置を指定する
text-alignは横方向の位置を指定すると覚えておきましょう。

CSSプロパティ参考になるかも

横方向の位置、左寄せ、中央寄せ、右寄せをコントロール
しましょう

上の図のように、文字を中央揃えにする際にはvertical-align: middleを指定すると
中央揃えが可能になります。

注意!
vertical-alignはブロック要素では適用できません。
インライン要素とテーブル要素のみになります。
※ブロック要素で代表的な要素でいうとdiv要素になります。

vertical-alignについて

vertical-alignプロパティは、縦方向の揃え位置を指定する際に使用します。

指定できる値
  • auto
    ブラウザによって自動的に調整されます
  • baseline
    親要素のベースラインの位置になります
  • top
    親要素の上端の位置になります
  • middle
    親要素の中央の位置になります
  • bottom
    親要素の下端の位置になります
  • sub
    親要素の上付き文字の位置になります
    (テーブルへの指定は無効)
  • super
    親要素の下付き文字の位置になります
    (テーブルへの指定は無効)
  • text-top
    テキストを上端に揃える
    (テーブルへの指定は無効)
  • text-bottom
    テキストを下端に揃える
    (テーブルへの指定は無効)
  • 数値と単位
    ベースラインからの移動する距離を指定します、マイナスの値なら下に移動します
  • %
    要素の行の高さに対する割合をパーセントで指定します

vertical-align指定方法について

vertical-alignプロパティは、テキスト行全体の行揃えを調整するものではありません。
vertical-alignプロパティを使用する際にはimgspanといった
インライン要素テーブル要素に適応させる必要があります。

インライン要素での指定方法

vertical-align: baseline
親要素のベースラインの位置になります

vertical-align: baseline

  • baselineを指定します
  • baselineを指定します
ul li img {
	vertical-align: baseline;
	padding-right: 10px;
}

vertical-align: top
親要素の上端の位置になります

vertical-align: top

  • topを指定します
  • topを指定します
ul li img {
	vertical-align: top;
	padding-right: 10px;
}

vertical-align: middle
親要素の中央の位置になります

vertical-align: middle

  • middleを指定します
  • middleを指定します
ul li img {
	vertical-align: middle;
	padding-right: 10px;
}

vertical-align: bottom
親要素の下端の位置になります

vertical-align: bottom

  • bottomを指定します
  • bottomを指定します
ul li img {
	vertical-align: bottom;
	padding-right: 10px;
}

vertical-align: sub
親要素の上付き文字の位置になります
(テーブルへの指定は無効)

vertical-align: sub

  • subを指定します
  • subを指定します
ul li img {
	vertical-align: sub;
	padding-right: 10px;
}

vertical-align: super
親要素の下付き文字の位置になります
(テーブルへの指定は無効)

vertical-align: super

  • superを指定します
  • superを指定します
ul li img {
	vertical-align: super;
	padding-right: 10px;
}

vertical-align: text-top
テキストを上端に揃える
(テーブルへの指定は無効)

vertical-align: text-top

  • text-topを指定します
  • text-topを指定します
ul li img {
	vertical-align: text-top;
	padding-right: 10px;
}

vertical-align: text-bottom
テキストを下端に揃える
(テーブルへの指定は無効)

vertical-align: text-top

  • text-bottomを指定します
  • text-bottomを指定します
ul li img {
	vertical-align: text-bottom;
	padding-right: 10px;
}

vertical-align: 数値と単位
ベースラインからの移動する距離を指定します、
マイナスの値なら下に移動します

vertical-align: 数値と単位

  • 数値と単位を指定します
  • 数値と単位を指定します
ul li img {
	vertical-align: -20px;
	padding-right: 10px;
}

テーブル要素での指定方法

table要素の参考になるかも

表を作成からレイアウトの変更までを解説しております。


テーブル要素では「top、middle、bottom」の3つの値を使用しましょう
今回は各tdにクラス名を付けCSSでvertical-alignの指定をおこなっております。

vertical-align:

動物好きな食べ物
クマくんりんご
サルくんバナナ
ゾウくんオレンジ
table th, 
table td  {
	height: 50px;
	padding: 10px;
	text-align: center;
}
/*--上端の位置--*/
table td.va_top {
	vertical-align: top;
}
/*--中央の位置--*/
table td.va_middle {
	vertical-align: middle;
}
/*--下端の位置--*/
table td.va_bottom {
	vertical-align: bottom;
}

また、文字を左寄せ、中央寄せ、右寄せする際にはtext-alignプロパティと組み合わせて
みてください。

div要素内でも中央位置に指定する方法について

基本的にブロック要素では中央の位置に要素を配置するのはできませんが、
display: tableプロパティを使用することで中央に配置することが可能になります。

display: tableとは

display: tableはtable要素と同じ表示になります。
つまり、親要素のdiv内をtable要素に置き換えます。

そして、子要素内にdisplay: table-cellvertical-align: middleを追加します。
display: table-cellとは、td要素と同じ表示になります。

display: table

SHUブログではホームページに関する情報をお届けします
.box {
	width: 80%;
    height: 200px;
	background-color: #f1f1f1;
	margin: 0 auto;
 	display: table;
}
.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

画像下の余白をなくす方法について

Before after

画像を表示させる際に下に余白ができたって事はありませんか?

imgタグにはデフォルトで「vertical-align: baseline」が適応されています。
画像の横にテキストが並ぶと想定し、そのテキストの下に飛び出す部分が余白の原因になります。

余白をなくす対象方法について

imgvertical-alignプロパティを指定しておきましょう。
値は「top、middle、bottom」のいずれかで大丈夫です。

vertical-align: baseline

vertical-align: bottom

bottom img {
  vertical-align: bottom;
}

ポイント!
毎回、imgタグに vertical-alignを指定するのは大変面倒ですので、
リセットCSSに記述しておきましょう!

img {
  max-width: 100%;
  vertical-align: bottom;
}

CSSプロパティ参考になるかも

line-heightの基本的な使用方法について解説して
おります。

文字も強調させたい、目立たせたい際に使用します。

まとめ

今回はこれで以上です。

POINT
  • vertical-alignは縦方向の位置を指定する
  • vertical-alignブロック要素では基本適用できません
  • インライン要素とテーブル要素のみになります
  • テーブル要素では「top、middle、bottom」の3つの値を使用しましょう
  • display: tableを使用することで中央に配置することが可能になります
  • imgタグには必ずvertical-alignプロパティを指定しておきましょう
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top