複数のDivタグを中央ぞろえ（Dreamweaver)

解決済

質問者：donchan2005
質問日時：2008/11/07 14:26
回答数：2件

DreamweaverCS3でサイトを作成しています。あるページに、Divタグを合計５つ作成しました。内訳は、(1)#header(2)#middle(3)#middleのなかに#left(4)#middleのなかに#right(5)#footerです。画像やテキストをいれたのはよいのですが、ブラウザでみると、すべて左に寄ってしまいます。これらすべてを画面の中央に表示するにはどうしたら良いでしょうか。どなたか教えていただけますでしょうか、お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： simeondun
回答日時：2008/11/14 13:21

No.1です。

補足に書かれたソースだけではなんとも判断できません。
「Mystyle.css」の内容を書いていただく必要があります。
> leftの部分がrightの真下に落ちており、さらにleftの下にfooterが出てしまいます。
ということは「float」がおかしくなっているとか？？

あと<div align="center">を使うのではなく
No.1で書いたようにしてしまうのがソースも簡素化されると思いますよ。
下記のページが参考になると思います。

［floatレイアウトでつまづかないためのTips］
http://adp.daa.jp/archives/000250.html
※特に「4. センタリング。」と「よくあるレイアウト」参考にどうぞ。
http://adp.daa.jp/tech/20040709-1.html

- 0
- 件

通報する

この回答へのお礼

simeondun様、お礼が遅れましてすみません。教えていただきましたソースも含め、再度見直してみます。参考のTipsページを拝見しました。非常にためになります。本当にありがとうございます。とりあえず、お礼かたがた締め切らせていただきます。同様のカテゴリで、他にも稚拙な質問をするかもしれませんが、その時も宜しくお願いします。

通報する

お礼日時：2008/11/17 17:04

No.1

回答者： simeondun
回答日時：2008/11/07 16:04

大きなボックスを中央に作り、その中に#header、#middle、#middle～（以下略）の

CSSを入れるようなものではダメでしょうか。IE7、Firefoxでは確認済みです。

【記述例】
***CSS***
body {
text-align:center;/*これで中央に設定しています*/
}
#wrap {
width:700px;/*任意の横幅*/
text-align:left;/*文字の左寄せ*/
margin:0px auto;
padding:0px;
}
#header {
（以下略）

***HTML***
<body>
<div id="wrap">
<div id="header">
・
（略）
・
</div>
</div>
</body>

この回答への補足

アドバイスありがとうございます。（お礼が遅れましてすみません。）
自身では下記のようなソースを使用しています。DWでのブラウザプレビューではheader・left・right・footerがしっかりと中央揃えされているのですが、実際にアップロードしてみると、leftの部分がrightの真下に落ちており、さらにleftの下にfooterが出てしまいます。アップロード画面とプレビュー画面が同一にするにはどうしたらよろしいでしょうか。アドバイスをお願いします。


<title></title>
<link href="Mystyle.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">

</style>
<div align="center"><div id="header"></div>
<div align="center"><div id="middle">
<div id="right">
<p></p>
<p></p>
<p> </p>
</div>
<div id="left">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
<div align="center"><div id="footer"></div>