今回は「【CSS 】vertical-alignで縦の位置について学ぼう!!」の解説です。
こんな方に読んでほしい
- CSSを学び始めた方へ
-
vertical-align
の使い方について学びたい方へ -
vertical-align
の書き方について学びたい方へ
vertical-alignとtext-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プロパティを使用する際にはimg
やspan
といった
インライン要素やテーブル要素に適応させる必要があります。
インライン要素での指定方法
vertical-align: baseline
親要素のベースラインの位置になります
ul li img {
vertical-align: baseline;
padding-right: 10px;
}
vertical-align: top
親要素の上端の位置になります
ul li img {
vertical-align: top;
padding-right: 10px;
}
vertical-align: middle
親要素の中央の位置になります
ul li img {
vertical-align: middle;
padding-right: 10px;
}
vertical-align: bottom
親要素の下端の位置になります
ul li img {
vertical-align: bottom;
padding-right: 10px;
}
vertical-align: sub
親要素の上付き文字の位置になります
(テーブルへの指定は無効)
ul li img {
vertical-align: sub;
padding-right: 10px;
}
vertical-align: super
親要素の下付き文字の位置になります
(テーブルへの指定は無効)
ul li img {
vertical-align: super;
padding-right: 10px;
}
vertical-align: text-top
テキストを上端に揃える
(テーブルへの指定は無効)
ul li img {
vertical-align: text-top;
padding-right: 10px;
}
vertical-align: text-bottom
テキストを下端に揃える
(テーブルへの指定は無効)
ul li img {
vertical-align: text-bottom;
padding-right: 10px;
}
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-cellとvertical-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;
}
画像下の余白をなくす方法について
画像を表示させる際に下に余白ができたって事はありませんか?
img
タグにはデフォルトで「vertical-align: baseline」が適応されています。
画像の横にテキストが並ぶと想定し、そのテキストの下に飛び出す部分が余白の原因になります。
余白をなくす対象方法について
img
にvertical-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に関する様々な情報を発信しています。
最新記事
関連記事