スタイルシートをめぐる冒険

CSSトラブルシューティング / ボックス関連

ボックス内でテキスト・画像の下揃えはできない

ボックスとは「セルが一つしかないテーブルのようなもの」と別項で書いたが、もちろん目的は全く違うものものだし、性格も特性も異なる。例えば、テーブルの場合、セルの中にテキストを下揃えで流すといったデザインが可能だが、ボックスではそれができない。
[該当するブラウザ]
すべて

症状

こうしたいのだが…

こうなってしまう

これを実現したいのは、例えば、背景画像の下辺に合わせてテキストを乗せたい時などだ。そこで、ボックスに図のような三角形の画像を背景として入れ、vertical-align: bottomと指定した。しかし、ボックス内のテキストは上揃えになったままである（→サンプルページ1）。同様に、middleを指定してもテキストを中央に配置することはできない。

【スタイルシート】

#box {
    width: 140px;
    height: 70px;
    background-image: url(bg2.gif);
    vertical-align: bottom;
    text-align: center;
}

【HTML】 <div id="box">← 140ピクセル →</div>

原因

仕様というしかない。そもそもvertical-alignは、画像やテキストなどのインライン要素か、テーブルのセルに対して指定するのが本来の使い方のようだ。

対策

テーブルを使う以外に方法はないだろう。（→サンプルページ2）

赤字は変更部分（スタイルシートは変更なし）
【HTML】

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td id="box">← 140ピクセル →</td>

</tr>

</table>

(last modified: 09/12/2008)

TrackBack

このエントリーのトラックバックURL:
http://norisfactory.com/mt/mt-tb.cgi/2

Comments

kikky wrote:

文字の上下中央揃えなら、line-height:70px;とする裏技もあるが、文字を大きくしたときの被害も大きくなります。
ページタイトルなどには使えます。

(posted on 08/13/2007)

contents

CSS実験室

CSSトラブルシューティング

-- background関連 --

背景画像の位置指定では正確にセンタリングできない

-- float関連 --

-- ソースの記述 --

-- ボックス関連 --

-- 定義リスト関連 --

-- 標準モードと互換モード --

フォントサイズの指定がテーブル内に継承されない

feed

RSS2.0
ATOM

このサイトは、Creative Commons License のもとにライセンスされています。