文字をボックスの中心にしたいのですが？

0   名前： 初心者 ： 2006/05/25（木） 17:47  ID:Ap8PbEDx
<body>
 <div style="background-color:red; width:200px; height:200px;">あ</div>
</body>


上記のタグを実行すると、赤い背景の”左上隅”に文字が表示されます。これを文字の中心とボックスの中心が
重なるような表示（ボックスの各辺からの長さが均一）にしたいのですが、どのようにすればいいのでしょうか？ＩＥ７．０を使ってます。
1   名前： 匿名 ： 2006/05/25（木） 17:47  ID:zB2/vVG8
ボックスはボックス内のテキストの行数が
ボックスいっぱいになると
勝手にボックスの長さも縦方向には伸びてしまうので（←IE6しか知りませんが）
左右のセンタリングは　text-align: center;　でできますが
上下方向にはできないのではないでしょうか？
無理矢理するなら高さ200pxのボックスということで
padding: 100px 0px;　とか…
ちょっと変になるかな…；

テーブルなら
セル内の文字の位置指定で
text-align: center;　と
vertical-align: middle;を使ってできますが

2   名前： カヅサツ ◆ThCi95HEzw ： 2006/05/25（木） 17:47  ［URL］  ID:O5hEMlpW
内容を要素の垂直方向の中央にする指定は、テーブルセルにしかできない、というルールになっています。

また、公式の HTMLのルールには table要素の height属性は存在しません。また、CSSのルールでは heightプロパティを 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>test</title>
<style type="text/css">
html,body{
	margin: 0px;
	padding: 0px;
	height: 100%;
}
table{
	width: 100%;
	height: 100%;
}
td{
	width: 100%;
	height: 100%;
	text-align:center;
	vertical-align: middle;
}
</style>
</head>
<body>
<table>
<tr><td>test</td></tr>
</table>
</body>
</html>

3   名前： 匿名 ： 2006/05/25（木） 17:47  ID:zB2/vVG8
>>1ですが
カヅサツさん
詳しくフォローありがとうございます。
4   名前： ＤＳ ： 2006/05/25（木） 17:47  ID:/.Bz.Sn1
スタイルシート質問板の投稿の方と同じ方なのかな？

http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=275

※上記を参考にどうぞ。
一覧へ戻る