vertical-alignプロパティ

TOPページに戻る > CSS

スポンサード リンク

vertical-alignプロパティ

行の中でインライン要素の位置を上下に移動できます
vertical-alignが使えるのはインライン要素と表のセルのみでブロック要素には使えません

使い方(書式)

セレクタ { vertical-align: 値; }                                    

プロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 インライン要素、td要素、th要素
子要素へのスタイルの継承 する

プロパティの値 説明
auto 位置を自動で調整
baseline ベースラインに要素を揃える
super 上付きの文字で表示
sub 下付きの文字で表示
top 子要素を上辺に揃える
text-top 親要素の文字の上辺に揃える
middle 中央に揃える(子要素の中央を親要素のmiddleのベースラインに揃える)
bottom 子要素を下辺に揃える
text-bottom 親要素の文字の下辺に揃える

実際の指定方法

.hoge { vertical-align: auto;  }        /* 位置を自動で調整 */

.hoge2 { vertical-align: baseline; }     /* ベースラインに要素を揃える */

.hoge3 { vertical-align: super; }        /* 上付きの文字で表示 */

.hoge4 { vertical-align: sub; }          /* 下付きの文字で表示 */

.hoge5 { vertical-align: top; }          /* 子要素を上辺に揃える */
.hoge6 { vertical-align: text-top; }     /* 親要素の文字の上辺に揃える */

.hoge7 { vertical-align: middle; }       /* 中央で揃える */

.hoge8 { vertical-align: bottom; }       /* 子要素を下辺に揃える */

.hoge9 { vertical-align: text-bottom; }  /* 親要素の文字の下辺に揃える */
.hogebox {           /* 外枠のスタイル */
 border: 1px solid #333333;
 background-color: lemonchiffon;
 font-size:60px;
 }
 
.oyabox {       /* 親要素のスタイル */
font-size:40px;
}

html部分 ※わかりやすくするため簡潔にhtmlを書いています。比較するためにまとめて書いてあります

<div class="hogebox">
文字
<span class="oyabox">親要素  /* 親要素はここから */
<span class="hoge">auto</span>
<span class="hoge2">baseline</span>
<span class="hoge3">super</span>
<span class="hoge4">sub</span>
<span class="hoge5">top</span>
<span class="hoge6">text-top</span>
<span class="hoge7">middle</span>
<span class="hoge8">bottom</span>
<span class="hoge9">text-bottom</span>
</span>                       /* 親要素はここまで囲ってます */
</div>

実際の表示

文字 親要素 auto baseline super sub top text-top middle bottom text-bottom

画像とテキスト

画像とテキストはどうでしょうか?やってみます
img.mid { vertical-align: middle; }       /* img要素のmidクラスに中央揃えを適用 */
img.top { vertical-align: top; }          /* img要素のtopクラスに上揃えを適用 */
img.bottom { vertical-align: bottom; }    /* img要素のbottomクラスに下揃えを適用 */

html部分

<p><img src="img.gif" alt="" class="mid">文字 middle</p>
<p><img src="img.gif" alt="" class="top">文字 top</p>
<p><img src="img.gif" alt="" class="bottom">文字 bottom</p>

実際の表示

文字 middle

文字 top

文字 bottom






(C)2012 ホームページ作成無料