ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >イメージ

画像に並ぶ文字の位置を指定する

{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 上方向に表示されています。

■ その他の項目

画像に枠線を入れる
画像の周りに余白を入れる
画像の横に文字を回り込ませる
画像の横幅、高さを指定する

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.