スポンサード リンク
vertical-alignプロパティ
行の中でインライン要素の位置を上下に移動できます使い方(書式)
セレクタ { vertical-align: 値; }
プロパティ
対応ブラウザ | |
適用できる要素 | インライン要素、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>
実際の表示
画像とテキスト
画像とテキストはどうでしょうか?やってみます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