WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:<div>要素内を縦中央に文字を。。。

0:[投稿] tomomi [2004/03/22 13:02 ][環境:IE Windows]

いつも参考にさせて頂いております。

現在、<div>要素の高さを現在、50pxに設定しておりますが、「●●●」文字部分を50pxの中央に
置きたいのですが、可能でしょうか?
横の中央であわば、「text-align: talign」で可能ですが、縦の中央の指定が分かりません。

宜しければ、アドバイスいただけないでしょうか。
お願い致します。

<div style="position:absolute; top:0px; left:0px; width:100%; height:50px; background-color:#fadb92; text-indent:1em;">
    <span style="font-size:13pt;>●●●</span>
</div>


1:[回答] 悩める学生 [2004/03/22 21:34 ]

<html>
<head>
<script>
function aa(){
span1.style.top=div1.offsetHeight/2-span1.offsetHeight/2;
span1.style.left = div1.offsetWidth/2-span1.offsetWidth/2;
}
</script>
</head>
<body onload="aa()">
<div id="div1" style="position:relative;top:0px; left:0px; width:100%; height:50px; background-color:#fadb92; text-indent:1em"><span id="span1" style="position:absolute;font-size:13pt">●●●</span>
</div>
</body>
</html>
こういうことでしょうか?


2:[回答] AC [2004/03/24 23:41 ]

仕様上は、
<style type="text/css">
#a { /* 略 */ }
#b {
position:absolute;
top:0; bottom:0;
height:1em;
margin-top:auto; margin-bottom:auto;
}
</style>
<div id="a">
<p id="b">●●●</p>
</div>
です。実際に、Mozillaなどのまともなブラウザでは正しく解釈します。

しかし、IE5.5以下では正しく解釈しないので、topとbottomを明示的に指定しておき、
marginが計算上0に近くなるようにしておけば、IE5.5以下でもそれなりに中央に近い位置に
なります。この例では、top+bottom+heightが親要素の高さ(50px)に近付くようにしています。
なお、この場合は、margin-top+margin-bottom=1pxとなりますが、
Mozillaなどでは、margin-topとmargin-bottomに0.5pxずつ分けられます。
ここでは例示のためにpx単位にしましたが、実際はptのような絶対単位や、pxは使うべきでは
ありません。
#b {
position:absolute;
top:17px; bottom:17px;
height:15px;
margin-top:auto; margin-bottom:auto;
}

なお、IE6などで標準モードで動作させるため、DOCTYPE宣言を必ず行うようにして下さい。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World