掲示板/スタイルシート質問板/過去ログ/一覧/ 高さに対する文字配置の設定について

0 名前： あるたいる ： 2006/05/18（木） 14:31 ID:De7vZ01R: 多分、vertical-alignに関する質問と思いますが、
「テーブルタグを使わない」で、指定した高さのちょうど真ん中の位置に文字を配置する方法はありますか？
文字のフォントサイズは固定ではなく、ユーザーがブラウザ側でフォントの表示サイズを大きくしても小さくしても、
高さがちょうど真ん中の位置に文字が置かれる状況を作りたいのです。
例えば、目次（イメージは、横に細長い帯に文字を入れる)です。
具体的な例として、

幅500px×30pxの薄いグレー(#cccccc）に黒文字のテキストを幅、高さとも中央に配置。

幅の方は、align: centerでできますが、
高さのほうは、vertical-align: middleでは効かないで、上に配置されてしまいます。
強引にpaddingで上の空間を作る形は、
ブラウザによって、あるいはユーザー側が設定している基本フォントサイズによっては、
真ん中になりませんので、
何かいい方法がないかと模索中です。
方法をご存知でしたら、教えていただけないでしょうか？

宜しくお願い致します。

1 名前： カヅサツ ◆ThCi95HEzw ： 2006/05/18（木） 14:31 ［URL］ ID:O5hEMlpW

displayプロパティの table 値に Win IE が対応していないため、現状は無理、です。

以下は透明gifを使うという、あまりオススメできない方法ですが、alt="" としているのでとりあえず邪魔にはなりません。
こんなことをするくらいなら table を使っても良いのではないかと思いますが。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
h1{
	color: black;
	background-color: #CCC;
	font-size: medium;
	text-align: center;
	width: 500px;
}
h1 img{
	vertical-align: middle;
	width: 1px;
	height: 30px;
}
</style>
</head>
<body>
<h1><img src="spacer.gif" alt="">見出し<img src="spacer.gif" alt=""></h1>
</body>
</html>

2 名前： あるたいる ： 2006/05/18（木） 14:31 ID:De7vZ01R: カヅサツ様

返信をありがとうございます。

そういえば、透明.gifという手もありますね。
その場合の記述まで書いていただき、ありがとうございます。
確かに、テーブルタグの方が早いかもしれません。

現状はテーブルタグの方が良いと思われるので、
考え直してみます。

ありがとうございました。