人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>

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

●質問者: shin-b
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS イメージ テキスト ボックス レイアウト
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Mars
●30ポイント

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

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

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

(WinIEでは動作せず。)


2 ● izayoimizuki
●40ポイント

えっと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年以内の近い将来に貴方の望む記述ができるようになるでしょう。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ