サイト内検索

...スタイルシート(css)...

スタイルシート・画像

画像に並ぶ文字の縦方向(上下)の位置

画像に並ぶ文字の縦方向(上下)の位置には、vertical-alignプロパティを指定します。
img要素に設定すると、画像に並ぶ文字の位置の指定ができます。
[使い方]
.sample1{vertical-align: middle;}
.sample2{vertical-align: -30px;}
.sample3{vertical-align: 130%;}
[縦方向(上下)の位置決め ]
プロパティ名 説明
vertical-align:baseline;(標準値・初期設定値)
top;
または
text-top;
画像の横の上部に文字を表示します。
middle;画像の横の中央に表示します。
bottom;
または
text-bottom;
画像の横の下部に表示します。
; baseline の位置を「0」に基準にして決めます。
「数値+単位」(例・・100px)を指定します。
単位は、「px」または「%」を指定します。

サンプル

[headの中]

<style type="text/css">
<!--
.sample1{vertical-align: middle;}
.sample2{vertical-align: -30px;}
.sample3{vertical-align: 130%;}
-->
</style>

[bodyの中]

<img src="img/sample.JPG"width="110" height="70">
指定なし
</p>

<img src="img/sample.JPG" width="110" height="70" class="sample1">
middleに指定

<img src="img/sample.JPG" width="110" height="70" class="sample2">
-30px に指定

<img src="img/sample.JPG" width="110" height="70" class="sample3">
130%に指定

[ブラウザ上]

サンプル指定なし

サンプルmiddleに指定

サンプル-30px に指定

サンプル130%に指定

Copyright c 2007.10.01 luc All rights reserved.