文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使网页内容居中

问如何使网页内容居中
EN

Stack Overflow用户

提问于 2011-01-26 12:50:07

回答 1查看 2.3K关注 0票数 2

我似乎无法解决为什么我的两个div没有以页面为中心的问题。我知道这是因为float: left。但就我而言，我想不出怎么解决这个问题。有人能帮上忙吗？

这是我的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;
 }

我知道浮动: left；是导致问题的原因，但我不知道如何解决它。

谢谢。

html

center

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-01-26 12:55:22

将它们包装在一个具有设定宽度和margin: 0 auto;的div中...例如，将顶级div从align="center"更改为class="center" (或将id更改为class)，然后执行以下操作：

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

align属性不会影响块级元素的对齐方式，但会影响其中内联元素的对齐方式。而你的div不是。

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4801486

复制

相似问题

问如何使网页内容居中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使网页内容居中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使网页内容居中
EN