如何居中网页内容

我似乎无法解决为什么我的两个div不在页面中心的问题。我知道这是因为浮动：左。但对于我的生活，我无法弄清楚如何解决这个问题。谁能帮忙？如何居中网页内容

这里是我的HTML：

<body> 
<div align="center"> 
<div id="left" class="left"> 
Left box needs to be on left of of white box 
</div> 

<div id="content" class="content"> 
Right box needs to be on the right side of red box 
</div> 

</div>  
</body>

这里是我的CSS：

body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; } 

body { 
    font-family: Arial, sans-serif; 
    background: #006699; 
} 

.content{ 
    width: 300px; 
    float: left; 
    background: #ffffff; 
    height: 300px; 
} 

.left{ 
    background: none repeat scroll 0 0 red; 
    float: left; 
    height: 300px; 
    width: 300px; 
}

我知道浮动：左;造成这个问题，但我不知道如何解决它。

感谢。

来源

2011-01-26 Ryan Bennett

包起来与一组宽度和margin: 0 auto;一个div ...比如改变你的顶层DIV从align="center"到class="center"（或ID，而不是类），然后执行：

.center { 
    width: 600px; 
    margin: 0 auto; 
}

align属性将不会影响块级元素的对齐，而是影响块内部元素的对齐。你的div不是。

来源

2011-01-26 04:55:21 prodigitalson

运作良好。谢谢。我是新来的CSS，这真的帮了我。再次感谢。 – 2011-01-26 05:00:13

如何居中网页内容

回答

相关问题