本部はただ文句を言わない私は私のHTML & CSSで起こっていくつかの奇妙なものを持っている

HELOコマンド本部はただ文句を言わない私は私のHTML & CSSで起こっていくつかの奇妙なものを持っている

を中心に取得し、私は水平に彼らの親要素の内側中央に表示されるべき2つのネストされたdivを持っているが、それらは左側に配置されています代わりに。

私は間違っていますか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" --> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <title></title> 
    <style type="text/css"> 
    <!-- 
     html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; } 

     html, body { height: 100%; width: 100%; } 
     body  { background-color: RGB(255, 255, 255); margin: 20px; text-align: center; } 

     #outerContainer { background-color: #DCFF9A; height: 100%; width: 100%; } 
     #header   { width: 30%; height: 180px; background-color: blue; } 
     #main   { width: 1200px; height: 60%; background-color: red; } 

    --> 
    </style> 

    <script type="text/javascript"> 
    <!-- 

    --> 
    </script> 

</head> 
<body> 

    <div id="outerContainer"> 

     <div id="header"> 

     </div> 
     <br/> 
     <div id="main"> 

     </div> 

    </div> 


</body> 
</html>

出典

2011-06-28 Mack

テキスト整列はテキストだけではなく、ブロックに影響を与えているようです。指定してみてください：既知の幅の中央ブロック要素に

#header   { width: 30%; height: 180px; background-color: blue; margin-left: auto; margin-right: auto; } 
    #main   { width: 1200px; height: 60%; background-color: red; margin-left: auto; margin-right: auto; }

出典

2011-06-28 04:48:24 Xepo

あなたはその中心部ではないでしょう2つのdivタグのためのあなたのCSSに以下の追加の属性を試みることができる：

マージン：自動;

よう：

#outerContainer { background-color: #DCFF9A; height: 100%; width: 100%; } 
#header   { width: 30%; height: 180px; background-color: blue; margin: auto;} 
#main   { width: 1200px; height: 60%; background-color: red; margin: auto;}

出典

2011-06-28 04:47:03 sybohy

実際に以下のスティーブも追加0からマージン：0 auto;私は彼の方が良いと思う。 – sybohy

使用margin:0 auto。

（親も幅のセットが必要な場合があります。）

出典

2011-06-28 04:48:45 Ben

、このいずれかを試してみてください。jsFiddle

<div id="outerContainer"> 

     <div id="header"> 

     </div> 
     <div id="main"> 

     </div> 

</div> 


#outerContainer { background-color: #DCFF9A; height: auto; width: auto; float:left;} 
    #header   { width: 30%; height: 180px; background-color: blue;display:block;margin:auto; } 
    #main   { width: 1200px; height: 60px; background-color: red;display:block;margin:auto; }

出典

2011-06-28 04:50:14 rrapuya

ちょうどあなたのCSSに以下を追加します。

#header, #main {margin: auto;}

出典

2011-06-28 04:50:24 Larsenal

本部はただ文句を言わない私は私のHTML & CSSで起こっていくつかの奇妙なものを持っている

答えて

関連する問題