HTMLとCSSの指定についてご存知の方教えてください。

トップページのコンテンツ全体をひとつの大きな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の天地左右のサイズはピクセルで指定
これを守ったままで、天地方向にもセンター表示をさせたいということなんです。
何かご存知の方は教えてください。よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 登録:2009/08/06 11:25:13
  • 終了:2009/08/06 17:17:17

ベストアンサー

id:nao_iwashima No.3

nao_iwashima回答回数15ベストアンサー獲得回数42009/08/06 14:29:46

ポイント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>
id:hirapi2104

ありがとうございます。このコードでやってみたら解決しました!

もやもやがはれてすごーくスッキリしました!

「天地左右」一度にセンター寄せにするわけですね?

このコードの組み合わせで、なぜこうなるかは今は理解できないですが…

いずれ時間のあjavascript:void(0);る時に、ゆっくりみて解読しようと思います。ところで

> (#余談ですが、天地630pxは縦スクロールが出る環境のユーザーもいるような気がします…)

確かにその通りなんですが、発注元のデザイナーが絵面もバシッと決めてきて、「とにかくデカく」という「指令」なんです。(これでもこっそり短めにしました)もちろん見れない人もいるかも、という説明もしましたが、聞く耳もたずで。

とにかく、いろいろ気にかけていただいてありがとうございます。

2009/08/06 17:05:56

その他の回答(2件)

id:sk_kls No.1

sk_kls回答回数26ベストアンサー獲得回数12009/08/06 12:06:19

ポイント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に対応させるためにはさらに必要な記述があるみたいですので、その場合はサイトを参考にどうぞ~

id:hirapi2104

すみません このやり方はちょっと違うようです。

2009/08/06 17:08:14
id:indiana No.2

indiana回答回数59ベストアンサー獲得回数32009/08/06 12:19:00

ポイント30pt

実現したいのは下記URLのようなことでしょうか。

http://www.lucky-bag.com/appendix/centering-elements/centering.h...


該当要素(div)へのposition指定でできます。

(上記URLのソースをご参考ください)


また、どうしても困難な場合はテーブルを使っても良いのではないでしょうか。

テーブルを使うことによるデメリットはそんなにないと思いますので。

id:hirapi2104

そうです!表示としてはこういうことです。

参考になりました。

もちろんほとんど画像だけなので、テーブルを使ってもいいんですが

今は仮サイトですが後にコンテンツを増やす予定なので

自分が管理者しやすい状態にしておきたいです。

2009/08/06 17:10:20
id:nao_iwashima No.3

nao_iwashima回答回数15ベストアンサー獲得回数42009/08/06 14:29:46ここでベストアンサー

ポイント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>
id:hirapi2104

ありがとうございます。このコードでやってみたら解決しました!

もやもやがはれてすごーくスッキリしました!

「天地左右」一度にセンター寄せにするわけですね?

このコードの組み合わせで、なぜこうなるかは今は理解できないですが…

いずれ時間のあjavascript:void(0);る時に、ゆっくりみて解読しようと思います。ところで

> (#余談ですが、天地630pxは縦スクロールが出る環境のユーザーもいるような気がします…)

確かにその通りなんですが、発注元のデザイナーが絵面もバシッと決めてきて、「とにかくデカく」という「指令」なんです。(これでもこっそり短めにしました)もちろん見れない人もいるかも、という説明もしましたが、聞く耳もたずで。

とにかく、いろいろ気にかけていただいてありがとうございます。

2009/08/06 17:05:56

コメントはまだありません

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

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

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

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