CSSでDIV要素内の縦方向の中央揃え方法を教えてください。

テーブルレイアウトで言えば「valign="center"」みたいな事をしたいのですが、分かりません。

以下のような感じの事をDIVボックスを使って表現したいです。
<table width="100px" height="100px" bgcolor="#AAAAAA">
<tr valign="center">
<td>テキスト</td>
</tr>
</table>

中央揃えにはなりませんが、イメージ的にはこういう感じです。
<div style="width:100px; height:100px; background-color: #AAAAAA; valign:center">テキスト</div>

また、もし出来ないなら、その理由等を解説したページも紹介していただければ嬉しいです。

回答の条件
  • 1人2回まで
  • 登録:2006/03/15 20:19:08
  • 終了:2006/03/15 23:13:45

回答(2件)

id:Mars No.1

Mars回答回数203ベストアンサー獲得回数202006/03/15 22:06:46

ポイント30pt

CSS2の仕様上は以下のようにすればできます。

<div style="width:100px;height:100px;background-color:#AAA;display:table-cell;vertical-align:middle">テキスト</div>

Win Firefox1.5とOpera8.5では仕様通り動作。

(WinIEでは動作せず。)

id:izayoimizuki No.2

izayoimizuki回答回数302ベストアンサー獲得回数02006/03/15 20:40:22

ポイント40pt

えっとCSSのvertical-align

(tableに適用した場合tableのvagainと同様の動作になります)と

tableのvagainとの実装目的が異なる事を留意しなければなりません。


CSSのvertical-alignは以下の例のように

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>test</title>

<style type="text/css">

<!CDATE[

p{

font-size:300%

}

span{

font-size:12pt;

vertical-align:middle;

color:#ff3300;

background:#ffffff;

}

img{

vertical-align:middle;

}

]>

</style>

</head>

<body>

<p>

テキスト<span>テキストの中央</span>

<img src="black.gif" alt="サンプル画像" />

</p>

</body>

</html>

異なる高さのテキストまたは画像などを

どのラインで合わせるかを指定する目的にしています。

そのため要素の位置とは無関係に設定されます。


それに対しtableのvalign

(およびtable配下の要素に指定されたvertical-align)は

要素のどの位置にあわせるかを定義します。


CSS2まででは以下の記述が限界です。

<table style="height:100px;vertical-align:middle;">

<tr><td>text</td></tr>

</table>


CSS3を利用すれば

<div style="display:table;height:100px;vertical-align:middle;">text</div>

といった記述が可能になりますが

未だワーキングドラフトであるため

対応ブラウザが1つも存在しません。


5年以内の近い将来に貴方の望む記述ができるようになるでしょう。

しかしそれは未だ未来の手法であって現在の手法ではありません。

  • id:shin-b
    早々のご回答ありがとうございました。やはりIEを含めると、現状では表現しにくい物だったんですね。
    izayoimizuki 様の手法も参考にさせて頂きたいと思います。
  • id:maverick100s
    いまさらですが、同じ問題に苦しんでいる方々と今後の自分の為に。

    以下の方法でBottomならば可能です。

    <html>
    <body>

    <div style="position:relative; height:200px; background-color: #cccccc;">
    test
    <div style="position:absolute; bottom:0px;">
    Bottom
    </div>
    </div>

    </body>
    </html>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません