2013-11-26 54 views
7

我的问题是简单地集中一个div。div不会以margin为中心: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量最少最简单的方法的问题。

这里是我的外部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和设置保证金左和marign右为汽车股利集宽度的内容。

不要在该div中使用float属性,也不要使用display:inline;并显示:inline-block;在该分区

您没有任何div id =“content”之间的内容,因此该div没有任何显示。只需为div id =“content”添加一些内容或设置高度即可。

+2

WOW .... T__T我很迟钝......谢谢你的帮助。它完美地解决了我的问题。我会牢记这一点以备将来参考。我刚刚准备好了结构,我没有意识到添加内容会激活我的css的某些部分。 再次,谢谢。 =]我真的很感激它。 – user3035285