2013-11-26 8 views
7

私の問題は単純にdivのセンタリングです。divはマージンでセンタリングしません:0 auto;

現時点では、私は裸の骨のhtmlファイルを持っています。 margin: 0 autoがなぜ機能しないのか分かりません。ここで

は私のhtmlのレイアウトです:

<style type="text/css"> 

#header { 
    width: 100%; 
    margin: 0 auto 20px auto; 
    height: 50px; 
    background-color: #0F6; 

} 
#navigation { 
    width: auto; 
    float: right; 
     margin: 0 auto; 
    display: inline-block; 
} 
#content { 
    background-color: #936; 
    margin: 0 auto; 
    width: 960px; 
    position: relative; 
    min-width: 720px; 
    max-width: 960px; 
} 
footer { 
    background-color:#0F6; 
    width: 100%; 
    height: 200px; 
} 
body { 
    background-image: url(images/dark_wall.png); 
} 

</style> 
</head> 
    <body> 
<div id="header"> 
    <div id="navigation">This is the nav</div> 
</div> 

<div id="content"> 
<div id="content_top"> 
</div> 
<div id="content_middle"> 
</div> 
<div id="content_bottom"> 
</div> 
</div> 



<footer> 
<div id="footer_div_1"><p>DIV #1</p> 
</div> 
<div id="footer_div_2"><p>DIV #2</p> 
</div> 
<div id="footer_div_3"><p>DIV #3</p> 
</div> 
</footer> 



</body> 
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript"> 
$(document).ready(function() { 
    var bodyHeight = $("body").height(); 
    var vwptHeight = $(window).height(); 
    if (vwptHeight > bodyHeight) { 
    $("footer").css("position","fixed").css("bottom",0); 
    } 
}); 
</script> 

<!– Add conditional for IE7 + 8 support –> 
<!–[if lte IE 8]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]–> 

下部のjqueryのは、それが私はそれが最低額をyeilds使用することを学んできた最も簡単な方法であると私のフッタースティッキーフッターを作ることだけです行の問題のここで

はdivのためのdivセット幅を中心と自動としてマージン左とmarign-権を設定するには、私の外部CSSファイルの内容

@charset "utf-8"; 
/* CSS Document */ 

body { 
    min-width: 960px; 
    background:url(../img/dark_wall.png); 
} 

html, body { 
    margin: 0; 
    border: 0; 
    width: 100%; 
    font-size: 100%; 
    font-family: Impact, "Courier New"; 
} 

#footer_div_1 { 
    display: inline-block; 
    width: 33%; 
    text-align: center; 
} 

#footer_div_2 { 
    display: inline-block; 
    width: 33%; 
    text-align: center; 
} 

#footer_div_3 { 
    display: inline-block; 
    width: 33%; 
    text-align: center; 
} 
+0

私が中心にしようとしているdivはdiv id = "content"です。 – user3035285

答えて

9

です。

そのdivでfloatプロパティを使用しないでください。また、display:inlineを使用しないでください。 display:インラインブロック。そのdiv内

div id = "content"の間には内容がありません。divには何も表示されません。 div id = "content"のコンテンツを追加するか、高さを設定するだけです。

+2

WOW .... T__T私は遅れました...... ......ありがとうございます。私の問題は完全に解決しました。私は将来の参考にこれを念頭に置いておきます。私はちょうど私がコンテンツを追加することが私のCSSの特定の部分を活性化することを認識していない構造を準備に巻き込まれた。再度、ありがとうございます。 =]本当に感謝しています。 – user3035285

関連する問題