こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSのdivで、ページ全体をセンタリング出来ない

質問させて頂きます。

<style type="text/css">
#contena {
margin-right: 10px;
margin-left: 10px;
text-align: center;
height: 900px;
width: 950px;
}
</style></head>

というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。

最も簡単に、このページをセンタリングするには、どうすればよいでしょうか?
ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。

下記にHTMLを記載しておきます。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows">
<title>タイトル</title>
<style type="text/css">
#contena {
margin-right: 10px;
margin-left: 10px;
text-align: center;
height: 900px;
width: 950px;
}
</style></head>
<body background="blue_p7b.gif">
<div id="contena">
<div style="top : 0px;left : 20px;
position : absolute;
z-index : 20;
" id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div>
<div style="top : 18px;left : 575px;
position : absolute;
z-index : 2;
" id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div>
<div style="top : 60px;left : 143px;
position : absolute;
z-index : 1;
" id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div>
<div style="top : 219px;left : 317px;
position : absolute;
z-index : 27;
width : 580px;
height : 51px;
" id="Layer28">
<p><font color="#0000ff" size="+2">コンテンツ</font></p>
</div>
<div style="top : 161px;left : 647px;
position : absolute;
z-index : 22;
" id="Layer23"></div>
<div style="top : 255px;left : 284px;
position : absolute;
z-index : 28;
" id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div>
<div style="top : 216px;left : 652px;
position : absolute;
z-index : 23;
" id="Layer24"></div>
<div style="top : 304px;left : 50px;
position : absolute;
z-index : 26;
" id="Layer27"></div>
<div style="top : 754px;left : 47px;
position : absolute;
z-index : 19;
width : 707px;
height : 154px;
" id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div>
<div style="top : 953px;left : 40px;
position : absolute;
z-index : 7;
" id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div>
<div style="top : 659px;left : 48px;
position : absolute;
z-index : 6;
" id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div>
<div style="top : 1020px;left : 34px;
position : absolute;
z-index : 12;

</div>
</body>
</html>




詳しい方がいましたら、よろしくお願いします。

投稿日時 - 2013-04-06 19:14:38

QNo.8030468

すぐに回答ほしいです

質問者が選んだベストアンサー

#contena {
position: relative; /* 追加 */
margin-right: auto; /* 変更 */
margin-left: auto; /* 変更 */
text-align: center;
height: 900px;
width: 950px;
}


なぜこういう書き方をすればこういう表示になるのか、という、根本的な理由を勉強してないと、再編集できませんよ。
CSSのプロパティや値について、きっちり勉強する事をお勧めします。

CSSがわかれば、Dreamweaverでもホームページビルダーでも、手書きでも、
標準モードでもどこでも配置モードでも、おおよそ問題なく作れるようになります。

-------------------
既に書かれていますが、「センタリング」には2つの意味(表示、レイアウト)があります。

-------------------
Dreamweaverやホームページビルダーのコードビューを表示して、エラーを確認、修正してください。
・<div id="contena">の終了タグがありません。
・最後のdivのstyle属性が終了していません。
・最後のdivの開始タグが閉じられていません。

投稿日時 - 2013-04-07 07:06:57

お礼

ご回答、ありがとうございます。大変参考になりました。

投稿日時 - 2013-04-08 16:09:42

ANo.2

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

全体位置指定なので、それでは無理ですし、意味を理解してCSSを使っていないようですね・・・
そんな玩具で作ったものは使えませんので、作り直しましょう。
-----------------

以下を表示したら、意味が分かると思いますが、
センターリングの意味が人によって違います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タイトル</title>
<style type="text/css"><!--
#contena { margin:0 auto; background:#EEE;width: 950px;}
#contena2 { text-align:center; background:#FFC;width: 950px;}
--></style></head>
<body>
<div id="contena">ようこそ</div>
<div id="contena2"><p>コンテンツ</p></div>
</body>
</html>


HTMLでは、DIVの中に、意味のある見出し<h1>や段落<p>などでマークアップした方が良いでしょう。

投稿日時 - 2013-04-06 20:40:16

お礼

ご回答、ありがとうございます。大変参考になりました。

投稿日時 - 2013-04-08 16:09:59

あなたにオススメの質問