シンプルなHTMLは、ページの中央にdivを表示する必要があります

なぜこの非常に単純なWebページでは、ページの中央にID「mainContent」のdivが表示されません。シンプルなHTMLは、ページの中央にdivを表示する必要があります

今すぐdivが左側にあります。しかし、divをWebページ（body要素）の中央に配置したいと思います。

What's going wrong？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title> </title> 

    <style type="text/css"> 
    <!-- 
     body { 
      text-align: center; 
      background-color: red; 
     } 

     #mainContent { 
      width: 800px; 
      background-color: blue; 
     } 

     #content { 
      width: 600px; 
      float: left; 
      background-color: green; 

      overflow: hidden; 
     } 

     #sidebar { 
      width: 200px; 
      float: left; 
      background-color: yellow; 

      overflow: hidden; 
     } 
    --> 
    </style> 
</head> 
<body> 

    <div id="mainContent"> 
     <!-- Left Column/Bar --> 
     <div id="content"> 
      <p>content</p> 
     </div> 

     <!-- Right Column/Bar --> 
     <div id="sidebar"> 
      <p>sidebar</p> 
     </div> 
    </div> 

</body> 
</html>

出典

2011-10-24 Jake M

にuはページ – diEcho

をレンダリングされ、ブラウザに言及してください、この5月にはUを支援します。https://developer.mozilla.org/ ja/HTML/Element/body – diEcho

ヒント：カラー名を使用せず、16進値を書いてください。廃止されました。 – diEcho

margin: 0 auto;を追加すると、上端と下端に余白があり、左右に余白があります。

#mainContent { 
     width: 800px; 
     margin: 0 auto; 
     background-color: blue; 
    }

出典

2011-10-24 07:10:58

@ merianos-nikosが正しければ、ボディルールに 'text-align：center;'を取り除いてください。 –

#mainContent { 
      width: 800px; 
      margin: 0 auto; 
      background-color: blue; 
     }

ことを試してみてください。 text-align:centerはテキストを中心にしていますが、必ずしもページ上のすべての要素を示す必要はありません。

出典

2011-10-24 07:11:20

あなたはそれを変更することもあります。

body { 
     text-align: center; 
     background-color: red; 
    }

その

body { 
     background-color: red; 
    }

出典

2011-10-24 07:12:11

シンプルなHTMLは、ページの中央にdivを表示する必要があります

答えて

関連する問題