コンテナ内で文字を中央に表示したい

質問

<div>
<table border=0 cellspacing=0 cellpadding=0
style="width: 100%; height: 100%;">
<tr>
<td style="text-align: center; vertical-align: middle;">
Hello!
</td>
</tr>
</table>
</div>

のように、テーブルを使わずに（できればCSSなどで）divタグ内のテキストを中央に表示したいのですが、できますか？

よろしくお願いします。

回答No.1

神崎 渉瑠（@taloo） · ベストアンサー

どのようなHTMLになるのかでスタイルシートの書き方も違ってきます。
（または、どのタグにスタイルを適用させたいか）
どのような記述をされていますか？

<p style="width:100%;height:100%;text-align:center;">Hello</p>
で（左右の）中央に表示されると思います。

vertical-align:middleはブロック要素には適用されませんから、テーブルを使わなければなりません。

以下はデザインを目的としたタグ（<div>）を追加しています。
悪い例として見てください。
（しかも使うにはいくつか条件があると思います。私にはこれくらいしか思いつきません。）

<div style="width:100%;height:100%;">
<p style="position:relative;top:50%;left:50%;">Hello</p>
</div>

お礼

早速のご回答ありがとうございます。ページのある場所（絶対位置で）に、例えば幅が200px、高さが100pxのdivタグを配置し、その中央に文字を表示させたかったのですが。やはり表を使わなければならないんですね。ありがとうございました。

回答No.3

神崎 渉瑠（@taloo）

> 悪い例として見てください。
<br style="clear:left;">のように
それしか方法がない場合は使わざるを得ないかも知れませんが、
表示に時間がかかるテーブルをよりはマシかも知れません。

ANo.1の<div>の方にサイズや位置などを指定すれば、高さ100pxもできます。
ボーダーや背景をつける場合は、基本的に<div>の方に指定することになります。＞デザインを目的としたタグの追加

お礼

ありがとうございます。

回答No.2

Oh-Orange

●スタイルシート部
DIV.Center{
　WIDTH: 200px;
　HEIGHT: 100px;
　TEXT-ALIGN:center;
　VERTICAL-ALIGN:middle;
}

●HTMLソース部
<CENTER>
<DIV CLASS=Center>Hello!</DIV>
</CENTER>

※BODY タグのマージンも使えば中央(中心)に出来るような気が…。→試していないため参考に！