ウインドウサイズを変更してもつねにセンタリング

質問

大変困ってますので、どなたか知恵を貸していただけないでしょうか？

Divで作ったレイヤーを画面サイズをユーザーが変更してもつねに中央に表示させるJAVAスクリプトで躓いています。

<script>

function center(target) {

var screenWidth = window.innerWidth;
var layerWidth = document.getElementById("base").style.width;
var diff = (screenWidth - layerWidth) / 2 ;

if (diff <= 0) diff = 0;

document.getElementById("base").style.left = diff;

}
</script>
<style>
#base {
overflow: auto;
position: absolute;
width: 459;
height: 344;
z-index: 1;
left: 269;
top: 158;
background-color: #FF6666;
}
</style>

という、スクリプトを作ってみたのですが、上手く作動しません。
何方か、上記記述の修正をどうぞ、宜しくお願いします！
（まったく別の方法でもかまいません…）

回答No.2

665 · ベストアンサー

JavaScriptは不要ではないですか？
もし、絶対位置指定である必要がないならば、以下の方法でセンタリングできます。
DIV要素が入れ子になっているのはIE対策です。
BODY要素をtext-align: center;としてもいいならば入れ子にする必要はないでしょう。

<style>
#hoge {
text-align: center;
}
#base {
overflow: auto;
width: 459px;
height: 344px;
margin-left: auto;
margin-right: auto;
margin-top: 158px;
text-align: left;
background-color: #FF6666;
}
</style>

センタリングして表示させる部分

<div id="hoge">
<div id="base">test</div>
</div>

//余り関係ないですがCSSで長さの指定には単位が必要です。

お礼

お礼、遅くなってしまい済みませんでした…

JAVAスクリプトを取り入れるというのが課題だったもので、JAVAスクリプトに拘っていたのですが
こんな方法もあるとは知りませんでした。
とても、勉強になりました！
CSSの事も含め、大変勉強になりました。
本当に、有難う御座いました…

回答No.3

EUR

絶対位置指定で行う場合は、IE、NN限定になってしまいます。
限定がいやならばNo2さんのようにtext-align: center;を用いるのがいいかと思います。

IE、NN限定でよいのならば、
ソースを修正いたしました。

修正点ですが、
１．window.innerWidthはNNでの幅取得法ですので、IEにも対応するようにしました。
２．document.getElementById("base").style.widthは<stle>～<style>で宣言されている値を取得できないようなので、offsetWidthで取得するようにしました。
（３．No2さんもおっしゃるとおり、CSSには単位が必要なので、つけました。）

修正したソースです。

<script language="javascript">
function center(target) {
　　//↓IE、NNで取得できるように修正
　　var screenWidth;
　　if(document.all){
　　　　//IE
　　　　screenWidth = document.body.clientWidth;
　　}else if(document.layers){
　　　　//NN
　　　　screenWidth = window.innerWidth;
　　}else{
　　　　//IE、NN以外
　　　　return false;
　　}
　　//↑IE、NNで取得できるように修正

　　//↓<style>～</style>の中をstyle.leftで取得できなかったので修正
　　var layerWidth = document.getElementById("base").offsetWidth;
　　//↑<style>～</style>の中をstyle.leftで取得できなかったので修正

　　var diff = (screenWidth - layerWidth) / 2 ;

　　if (diff <= 0) diff = 0;

　　document.getElementById("base").style.left = diff;
}
</script>
<style>
#base {
overflow: auto;
position: absolute;
width: 459px;
height: 344px;
z-index: 1;
left: 269px;
top: 158px;
background-color: #FF6666;
}
</style>

お礼

お礼、遅くなってしまって済みませんでした…

JAVAスクリプトでの絶対位置指定はIE・NNだけなのですか？！
JAVAスクリプトならその他のブラウザも対応できるかと思ったのですが…
スクリプト修正して頂き有難う御座いました！
text-align: center;と、JAVAスクリプトにして他ブラウザは別に対応策を作るか自分なりに検討してみたいと思います。

このたびは本当に有難う御座いました…！

回答No.1

SpiceGirl

こういうのがヒントになるのかなと

Lucky bag::blog: 要素を常に画面の中央に配置
http://www.lucky-bag.com/archives/2005/06/centering.html

参考URL：

http://www.lucky-bag.com/archives/2005/06/centering.html

お礼

お礼、遅くなってしまいまして済みませんでした…
記事を拝見させて頂いたところ、Operaが作動しないとの事でしたが、そういう考え方もあるんだと勉強させて頂きました。
このたびはご回答、本当に有難う御座いました…！