カテゴリー: vertical-align

カテゴリー
CSS vertical-align

【CSS】vertical-align：縦方向を調整する

（例）【CSS】vertical-alignの使用方法

See the Pen
vertical-align by linlin (@linlin098765)
on CodePen. 

<div id="test">
<div><span class="rei">例</span><span class="oya">Example.<span class="sample1">baseline</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample2">top</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample3">middle</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample4">bottom</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample5">text-top</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample6">text-bottom</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample7">super</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample8">sub</span></span></div>
</div>
#test div {background-color:gray; margin:2px;}
.rei {font-size:30px;}
.oya {font-size:16px; background-color:#ccffcc;}
.sample1 {font-size:12px; background-color:#ffccff; vertical-align:baseline;}
.sample2 {font-size:12px; background-color:#ffccff; vertical-align:top;}
.sample3 {font-size:12px; background-color:#ffccff; vertical-align:middle;}
.sample4 {font-size:12px; background-color:#ffccff; vertical-align:bottom;}
.sample5 {font-size:12px; background-color:#ffccff; vertical-align:text-top;}
.sample6 {font-size:12px; background-color:#ffccff; vertical-align:text-bottom;}
.sample7 {font-size:12px; background-color:#ffccff; vertical-align:super;}
.sample8 {font-size:12px; background-color:#ffccff; vertical-align:sub;}

【CSS】vertical-align：テキストの縦方向を調整する

　CSSのvertical-alignは、テキストや画像の縦方向を調整するプロパティです。vertical-alignプロパティは、インライン要素とテーブルセルに適用可能です。ブロック要素には適用不可です。

  • baseline
    親要素のベースラインに合わせる（初期値）
  • top
    上端揃え
  • middle
    中央揃え
  • bottom
    下端揃え
  • text-top
    テキストの上端揃え
  • text-bottom
    テキストの下端揃え
  • super
    上付き文字
  • sub
    下付き文字
  • %
    その要素のline-heightプロパティの値に対する割合を%で指定
  • 数値+単位
    数値にem,ex,px等の単位を加えて指定（ベースラインが揃った状態を0、正の値なら上、負の値なら下へ移動）