サイト内検索
...スタイルシート(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%に指定
[ブラウザ上]
指定なし
-30px に指定