IMG Element with align attribute

'vertical-align' プロパティ

last modified 10th/Oct. 2000

align 属性は非推奨属性ですから、出来るだけ CSS を利用するようにしましょう。本節では、画像の垂直方向の表示位置を調整するための CSS を紹介します。

style 属性によるインラインスタイル

<img src="../back.jpg"
   style="vertical-align:top">
<img src="../back.jpg"
   style="vertical-align:middle">

'vertical-align' プロパティは、インライン要素の垂直方向表示位置を指定し、任意のインライン要素に適用できます。その取り得る値は、次のように定義されています；

vertical-align	baseline \| sub \| super \| top \| text-top \| middle \| bottom \| text-bottom \| <length> \| <%> \| inherit

vertical-align

負値が許され、正は上へ、負は下へずらします。

INLINE 要素、TD 要素、TH 要素にしか適用できません。

初期値は baseline です。

子要素に値が継承しません。

baseline

指定されたインラインボックスと親要素のボックスのベースライン（或は下辺）を揃えます。

sub

親ボックスの下付き文字位置まで字下げしますが、フォントサイズには影響を与えません。

super

親ボックスの上付き文字位置まで字上げしますが、フォントサイズには影響を与えません。

text-top

指定されたインラインボックスの上辺と親要素のフォントの上辺と揃えます。

<%>

この値と、 line-height の値を掛けた大きさだけずらします。
0% で baseline と一致します。

或る文書中に登場する全てのIMG要素に対して、初期設定を middle にしたい場合は、 HEAD 要素内で STYLE 要素を記述します；

STYLE 要素での宣言；

<head>
<title>vertical-align の例</title>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
img { vertical-align: middle }
img.sup { vertical-align: super }
-->
</style>
</head>

二つ目のスタイル宣言 img.sup { vertical-align: super } では、 class 属性値 sup を与えた IMG 要素が上付き添え字の位置に表示されるように設定してあります。

CSS の基本的な使い方と用語に付いては、「CSS の紹介」を参照ください。