Close
vertical-alignプロパティは、行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用します。
vertical-alignプロパティを適用できるのは、インライン要素とテーブルセルです。ブロックレベル要素には適用できません。
vertical-alignプロパティは、それぞれの値を指定した際の実際の動作が理解しにくいもののひとつですが、以下のポイントを知っておくと、理解を深めるのに役立ちます。
#sample div {background-color:#ccccff; margin:4px;}
.rei {font-size:60px;}
.oya {font-size:30px; 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;}
<html>
<head>
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<div id=”sample”>
<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>
</body>
</html>
どのカジノが自分に最適か分からないですか?
