|
{vertical-align:位置;}
で画像に並ぶ縦方向の文字の位置を指定することができます。
■ 画像に並ぶ縦方向の表示位置
表示できる位置は以下のとおりです。
| 位置 | 説明 |
| baseline | 画像と文字のベースラインを
合わせます。文字のベースライン（下部）とは英字のabcなどの
最下部のことです。（デフォルト）
|
| top | 画像と文字を行の一番上の位置に揃えます。 |
| text-top | 画像を基準になるフォントサイズの文字の上端の位置に揃えます。 |
| middle | 画像の中央に文字を表示します。 |
| text-bottom |
画像を基準になるフォントサイズの文字の下端の位置に揃えます。
|
| bottom | 画像と文字を行の一番下の位置に揃えます。 |
| %で指定 | ベースラインを0としてプラスの値なら上方向に
表示しマイナスの値なら下方向に表示します。 |
| pxやemで指定 | ベースラインを0としてプラスの値なら上方向に
表示しマイナスの値なら下方向に表示します。 |
【ブラウザ表示】
abcde画像と文字のベースラインが揃っています。
abcde画像と文字が行の一番上の位置で揃っています。
abcde画像が基準になるフォントサイズの文字の上端の位置で揃っています。
abcde画像の中央に文字が表示されています。
jpy画像が基準になるフォントサイズの文字の下端の位置で揃っています。
abcde画像と文字が行の一番下の位置で揃っています。
abcde画像は文字のベースラインより10%上方向に表示されています。
abcde画像は文字のベースラインより30px 上方向に表示されています。
ソース
<img src="./image/banner.gif" alt="画像" class="sample4">
abcde画像と文字のベースラインが揃っています。
<img src="./image/banner.gif" alt="画像" class="sample5">
abcde画像と文字が行の一番上の位置で揃っています。
<img src="./image/banner.gif" alt="画像" class="sample6">
abcde画像が基準になるフォントサイズの文字の上端の位置で揃っています。
<img src="./image/banner.gif" alt="画像" class="sample7">
abcde画像の中央に文字が表示されています。
<img src="./image/banner.gif" alt="画像" class="sample8">
jpy画像が基準になるフォントサイズの文字の下端の位置で揃っています。
<img src="./image/banner.gif" alt="画像" class="sample9">
abcde画像と文字が行の一番下の位置で揃っています。
<img src="./image/banner.gif" alt="画像" class="sample10">
abcde画像は文字のベースラインより10%上方向に表示されています。
<img src="./image/banner.gif" alt="画像" class="sample11">
abcde画像は文字のベースラインより30px 上方向に表示されています。
外部ファイル
img.sample4{vertical-align:baseline;}
img.sample5{vertical-align:top;}
img.sample6{vertical-align:text-top;}
img.sample7{vertical-align:middle;}
img.sample8{vertical-align:text-bottom;}
img.sample9{vertical-align:bottom;}
img.sample10{vertical-align:10%;}
img.sample11{vertical-align:30px;}
<body>～</body>に直接記入する場合
<img src="./image/banner.gif" alt="画像" style="vertical-align:baseline;">
abcde画像と文字のベースラインが揃っています。
<img src="./image/banner.gif" alt="画像" style="vertical-align:top;">
abcde画像と文字が行の一番上の位置で揃っています。
<img src="./image/banner.gif" alt="画像" style="vertical-align:text-top;">
abcde画像が基準になるフォントサイズの文字の上端の位置で揃っています。
<img src="./image/banner.gif" alt="画像" style="vertical-align:middle;">
abcde画像の中央に文字が表示されています。
<img src="./image/banner.gif" alt="画像" style="vertical-align:text-bottom;">
jpy画像が基準になるフォントサイズの文字の下端の位置で揃っています。
<img src="./image/banner.gif" alt="画像" style="vertical-align:bottom;">
abcde画像と文字が行の一番下の位置で揃っています。
<img src="./image/banner.gif" alt="画像" style="vertical-align:10%;">
abcde画像は文字のベースラインより10%上方向に表示されています。
<img src="./image/banner.gif" alt="画像" style="vertical-align:30px;">
abcde画像は文字のベースラインより30px 上方向に表示されています。
■ その他の項目
・
画像に枠線を入れる
・
画像の周りに余白を入れる
・
画像の横に文字を回り込ませる
・
画像の横幅、高さを指定する
・
画像を切り抜く
・
画像のマスクを指定する
スタイルシート一覧のページに戻る
|
