0

HTML レイアウトを作成しようとしています。多数の要素を作成し、CSS で境界線などを指定しました。メインの「ラッパー」を中央に配置しようとしているので、この要素内にあるものもすべて中央に配置されます。

margin、align、absoluteなど、すべてを試しましたが、何も機能していません。私の滞在は私のページの左上隅にあります。

これは私のインデックスページで、要素は次のとおりです。

<!--#include file ="inc.heads.asp"-->

<html>

<head>
</head>

<body>
 <div id ="divWrapper">
  <div id ="divHeader">
   <img src="Images/title.png">
   <br>
   <div id ="divNavBar">
    <br>
     <div id ="divContent">
     </div>
   </div>
  </div>
 </div>
</body>

</html>

これは私のCSSです：

body {
 background-color: #300;
}

#divWrapper {
 margin: 0 auto;
 width: 800px;
}

#divHeader {
 width: 500px;
 border-style: inset;
 border-color: #COCOCO;
 background-color: #707070;
 padding: 5px;
}

#divNavBar {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}

#divContent {
 float: left;
 width: 500px;
 border-style: inset;
 border-color: #COCOCO;
 background-color: #707070;
 padding: 5px;
}

誰かが、私が試したことのどれも機能しない理由と、可能な解決策を明らかにすることができれば.

ありがとう！

4

5 に答える 5

0 
#divWrapper{
   margin-left:auto;
   margin-right:auto;
}

トリックを行う必要があります。

于 2013-01-18T14:21:45.733 に答える
0

margin: 0 autoの内容に追加するだけです#divWrapper：

たとえば、CSSに次のように追加します。

#divWrapper * {
    margin: 0 auto;
}

要素のみdivを中央に配置する場合は、次を使用します。

#divWrapper div {
    margin: 0 auto;
}

ここで動作するデモを見ることができます> http://jsfiddle.net/gu7Sr/

また、補足として、<br />レイアウトの作成に使用しないようにしてください。うまくスケーリングできず、将来的に再設計するのに苦労するでしょう！

于 2013-01-18T14:23:10.990 に答える
0

Seriously what is the point of all those wrappers? Just do this:

body {width: 800px; margin: 0 auto; }
于 2013-01-18T15:01:21.110 に答える
0

これがあなたの望むものだと思います。リンク: http://codepen.io/anon/pen/Ihzxp

<body>
 <div id="divWrapper">
  <div id="divHeader">
   <img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Small.png">
   <div id="divNavBar">
     <div id="divContent">
       Stuff
     </div>
   </div>
  </div>
 </div>
</body>

と

body {
 background-color: #300;
}

#divWrapper {
 width: 100%;
}

#divHeader {
 width: 600px;
 border-style: inset;
 border-color: #COCOCO;
 background-color: #707070;
 padding: 5px;
margin: 5px auto;
 text-align:center;
}

#divNavBar {
width: 550px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 15px;
margin: 5px auto;
}

#divContent {
 width: 500px;
 border-style: inset;
 border-color: #COCOCO;
 background-color: #707070;
 padding: 5px;
 margin: 5px auto;
}
于 2013-01-18T14:48:56.157 に答える
0

BenMの回答へのコメントですが、まだコメントするほどの評判はありません。確かに：

margin:auto;

それ自体でトリックを行います。

于 2013-01-18T14:54:02.193 に答える