Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

vertical-align(メモ)

More than 1 year has passed since last update.

vertical-alignとは

vartical-alignプロパティとは要素の縦方向の配置の基準を指定することができる。
このプロパティはインライン要素にのみ有効

「vertical-alignを指定した要素のどこを、親要素のどこに合わせるか」

一覧

オプション 説明
baseline 親要素のベースラインに揃える
middle 対象の要素と親要素の中央ラインを親要素に揃える
text-top 対象要素と親要素の最上部ラインを親要素の文字の最上部に揃える
text-bottom 対象要素と親要素の最下部ラインを親要素の文字の最下部に揃える
top 対象要素の行の最上ラインを親要素の行の最上部ラインに揃える
bottom 対象要素の行の最下部ラインを親要素の行の最下部ラインに揃える
数値+単位 対象要素のベースラインを、親要素のベースラインから指定ぶんの距離を置いた位置に揃える
% 対象要素のline-heightの高さを100%として、対象要素のベースラインを親要素のベースラインから指定の割合ぶんの距離を置く

ラインとは

a.html
   <div>
       hoge
       <span>huga</span>
   </div>

スクリーンショット 2018-07-07 13.21.46.png

要素の基準となる線がある

 例

style.css
span{
 vertical-align: text-top;
}

とすると

スクリーンショット 2018-07-07 13.25.39.png

hoge(親要素)のtext-topのラインと、huga(対象のインライン要素)のtext-topのラインが一致するようになる

tomo77777
JavaScriptお勉強中です。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away