トップページのコンテンツ全体をひとつの大きなdivで包み、それに対してCSSで
margin:0px auto 0px auto;
を指定して、「常に左右センターで表示する」設定にしていました。
そのdivには
width:1000px;height:630px;
で、天地左右のサイズ指定をしています。
そうしたらお客から「天地方向もセンター表示にできませんか?」といわれ
何でも「できるらしい」という話だけがあり、自分でも調べてみたのですが、以下のようなコードしか見つかりませんでした。
●HTML <div id="floater"><div id="content">Content here</div></div>
●CSS #floater {float:left; height:50%; margin-bottom:-120px;} #content {clear:both; height:240px; position:relative;}
別のファイルを作ったら再現はされましたが、これだと「左フロート」とか、「高さを％指定」とか
自分のサイトでは適用できない指定があり、かといって他にいいテクニックも見つからず、困っています。
・divを左右センター表示 ・divの天地左右のサイズはピクセルで指定
これを守ったままで、天地方向にもセンター表示をさせたいということなんです。
何かご存知の方は教えてください。よろしくお願いいたします。
No.3
15
4
200pt
自分はいつも下記のような書き方をしていますが、いかがでしょう？
(#余談ですが、天地630pxは縦スクロールが出る環境のユーザーもいるような気がします…)
10
9
#hoge
{
width: 1000px;
height: 630px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -315px;
margin-left: -500px;
}
<div id="hoge">
<p>hoge</p>
</div>
No.1
261
20pt
http://www.webbibo.com/stylesheet/layout/vertical.html
こちらのサイトを参考にしてます。
<html>
<head>
<style type="text/css"><!--
div {width:1000px;
height:630px;}
div.wrap div {display: table-cell;
vertical-align: middle;}
div.wrap div.box1 {background-color: #FFDDDD;}
--></style>
</head>
<body>
<div class="wrap">
<div class="box1">
ボックス1<br>
ボックス1<br>
ボックス1<br>
ボックス1<br>
ボックス1
</div><br>
<div class="box2">
ボックス2<br>
ボックス2
</div>
<br><br>
<p>テスト</p>
</body>
</html>
うまく出来なかったらスミマセン。
ちなみにIEに対応させるためにはさらに必要な記述があるみたいですので、その場合はサイトを参考にどうぞ～
すみません このやり方はちょっと違うようです。
No.2
593
30pt
実現したいのは下記URLのようなことでしょうか。
http://www.lucky-bag.com/appendix/centering-elements/centering.h...
該当要素（div）へのposition指定でできます。
（上記URLのソースをご参考ください）
また、どうしても困難な場合はテーブルを使っても良いのではないでしょうか。
テーブルを使うことによるデメリットはそんなにないと思いますので。
そうです！表示としてはこういうことです。
参考になりました。
もちろんほとんど画像だけなので、テーブルを使ってもいいんですが
今は仮サイトですが後にコンテンツを増やす予定なので
自分が管理者しやすい状態にしておきたいです。
No.3
154
ここでベストアンサー
200pt
自分はいつも下記のような書き方をしていますが、いかがでしょう？
(#余談ですが、天地630pxは縦スクロールが出る環境のユーザーもいるような気がします…)
#hoge
{
width: 1000px;
height: 630px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -315px;
margin-left: -500px;
}
<div id="hoge">
<p>hoge</p>
</div>
ありがとうございます。このコードでやってみたら解決しました！
もやもやがはれてすごーくスッキリしました！
「天地左右」一度にセンター寄せにするわけですね?
このコードの組み合わせで、なぜこうなるかは今は理解できないですが…
いずれ時間のあjavascript:void(0);る時に、ゆっくりみて解読しようと思います。ところで
> (#余談ですが、天地630pxは縦スクロールが出る環境のユーザーもいるような気がします…)
確かにその通りなんですが、発注元のデザイナーが絵面もバシッと決めてきて、「とにかくデカく」という「指令」なんです。（これでもこっそり短めにしました）もちろん見れない人もいるかも、という説明もしましたが、聞く耳もたずで。
とにかく、いろいろ気にかけていただいてありがとうございます。
3
2
1
ありがとうございます。このコードでやってみたら解決しました！
もやもやがはれてすごーくスッキリしました！
「天地左右」一度にセンター寄せにするわけですね?
このコードの組み合わせで、なぜこうなるかは今は理解できないですが…
いずれ時間のあjavascript:void(0);る時に、ゆっくりみて解読しようと思います。ところで
> (#余談ですが、天地630pxは縦スクロールが出る環境のユーザーもいるような気がします…)
確かにその通りなんですが、発注元のデザイナーが絵面もバシッと決めてきて、「とにかくデカく」という「指令」なんです。（これでもこっそり短めにしました）もちろん見れない人もいるかも、という説明もしましたが、聞く耳もたずで。
とにかく、いろいろ気にかけていただいてありがとうございます。