ＣＳＳについて

質問

CSSで下記のように記載すると高さ200pxのボーダ枠の中にaaaaaと記載されるのまでは、よいのですが、上詰めになってしまうのです。高さ200pxの中央に表示させるにはどうしたらよいのでしょうか。

どうぞよろしくお願いいたします。

▼CSSソース
--------------------------
#contents{
border: solid 1px #ccc;
margin: 0;
padding: 0;
width: 500px;
height: 200px;
text-align: center;
}
--------------------------
▼HTMLソース
<div id="contents">aaaaa</div>
--------------------------

回答No.3

Questa

No.2が示された方法が無難だと思います。

あえて CSS でやるなら次のようになりますが、IE6、Opera8.5、Firefox1.6 以外での表示は保証できません。

やめといたほうがいいです。あくまで参考ということで。

▼CSSソース
--------------------------
#contents {
border: solid 1px #ccc;
width: 500px;
height: 12em;
text-align: center;
}
#dummy { line-height: 12em; }
#inner { vertical-align: middle; }
--------------------------
▼HTMLソース
<div id="contents">
<span id="dummy">&nbsp;</span>
<span id="inner">aaaaa&nbsp;</span>
</div>
--------------------------

※ height を可変サイズにしたのは Firefox におけるズーム対策です。Firefox のズームを無視するなら 200px でも問題ありません。

※ テキストの改行は不可です。

回答No.2

taba

上下の中央揃えは、vertical-alignですが、この属性は何故かインライン要素とテーブルセル要素にしか使えません。
vertical-align: middle;
を追加して、
<table><tr><td id="contents">aaaaa</td></tr></table>
とすれば、一応希望通りになるのではないでしょうか。CSSとして好ましい書き方かどうかは分かりませんが、手元のIE6では大丈夫でした。

回答No.1

C_S_C

tableのように、高さの中央揃えは、CSSでは出来なかったと思います。
ただheightが固定であるなら
paddingで中央に寄せる事は出来ますが・・。