0

これは一般的な要求です。しかし、私は頭がおかしくなります。

    <style type="text/css">
        html, body { height: 100%; margin:0px; padding:0px; }
        #content { margin-left: 50%; margin-right: 50%; width:900px; }
    </style>

...

<body style="min-height:100%; height:100%; position:relative;">
  <header style="min-height:200px;">
      <div style="height:50px; background:url(http://www.mydomain.com/images/bg.gif) repeat-x;">&nbsp;</div>
      <div style="height:300px; background:url(http://www.mydomain.com/images/bg2.jpg) repeat;">
        <div class="content" style="height:300px; background:url(http://www.mydomain.com/images/masthead-back.jpg) no-repeat;">
          <img alt="Hello" src="http://www.mydomain.com/images/logo.png" />
          Welcome.
        </div>
      </div>

      <div id="nav">
        <ul class="navs">
          <li><a href="Main.aspx">Home</a></li>
      <li><a href="ContactUs.aspx">Contact</a></li>
      <li><a href="AboutUs.aspx">About Us</a></li>
        </ul>
      </div>
    </div>
  </header>

  <article class="content" style="padding-bottom:60px;">
    This is the main content
  </article>

  <footer style="position:absolute; bottom:0px; width:100%; height:60px; background-color:black;">
    <div class="content">
      <a href='#'>Privacy</a>&nbsp;|&nbsp;<a href='#'>Terms of use</a>
     </div>
  </footer>
</body>

ヘッダー、記事、およびフッターの項目を本文の中央に配置したいと考えています。しかし、ヘッダー、記事、フッター内のコンテンツを左揃えにしたいです。何が間違っているのですか。現在、すべてが左揃えになっています。ただし、画面の中央にはありません。

4

4 に答える 4

0

古いブラウザに対応するには、CSSでブロックする記事、ヘッダー、フッターの表示スタイルを設定する必要があります

また、<div id = "nav">の代わりに<nav/>を使用してみませんか？

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {  display:block; }

 <nav>
        <ul class="navs">
          <li><a href="Main.aspx">Home</a></li>
      <li><a href="ContactUs.aspx">Contact</a></li>
      <li><a href="AboutUs.aspx">About Us</a></li>
        </ul>
      </nav>
于 2012-12-07T17:34:27.930 に答える
0

試す：

div.content //or nav or just plain div
{
margin-left: auto; //centers the DIVs
margin-right:auto;
text-align: left;
}
于 2012-12-07T17:35:03.647 に答える
0

この CSS にはラッパー DIV が必要です。

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

ワーキングデモ

于 2012-12-07T17:37:18.700 に答える
0

本体に追加する必要があります

width:960px; margin: 0 auto;
于 2012-12-07T17:39:44.800 に答える