"vertical-align"のサンプル

Notice
比較においてる要素の基本スタイルは、次のように指定してます。 
/* 比較要素のスタイル */
strong { font-size:400%; line-height:100%; }    /* Strong */
em     { font-size:200%; line-height:100%; }    /* Em */
img    { width:35px; height:74px; }    /* アイコン */
CSS適用前サンプル
--- (無指定)
NORMAL honya Strong honya Em honya image-sample honya
CSS適用後サンプル
vertical-align: baseline; (デフォルト)
NORMAL baseline Strong baseline Em baseline image-sample baseline
vertical-align: top;
NORMAL top Strong top Em top image-sample top
vertical-align: middle;
NORMAL middle Strong middle Em middle image-sample middle
vertical-align: bottom;
NORMAL bottom Strong bottom Em bottom image-sample bottom
vertical-align: text-top;
NORMAL text-top Strong text-top Em text-top image-sample text-top
vertical-align: text-bottom;
NORMAL text-bottom Strong text-bottom Em text-bottom image-sample text-bottom
vertical-align: super;
NORMAL super Strong super Em super image-sample super
vertical-align: sub;
NORMAL sub Strong sub Em sub image-sample sub
vertical-align: 3em;
NORMAL 3em Strong 3em Em 3em image-sample 3em
vertical-align: -300%;
NORMAL -300% Strong -300% Em -300% image-sample -300%
© s*m