如何将网页内容居中

发布于 2024-10-14 18:02:00 字数 833 浏览 3 评论 0原文

我似乎无法解决为什么我的两个 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;
 }

我知道 float: left;导致了问题，但我不知道如何解决它。

谢谢。

原文

I can't seem to solve the issue on why my two divs are not centering on the page. I know it is because of float: left. But for the life of me, I can't figure out how to solve the problem. Can anyone help?

Here is my 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>

Here is my 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;
 }

I know the float: left; is causing the problem but I don't know how to solve it.

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

东风软 2024-10-21 18:02:00

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

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

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

wrap them in a div with a set width and margin: 0 auto;... for example change your top level div from align="center" to class="center" (or id instead of class) and then do:

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

the align attribute wont effect the alignment of a block level element but rather the alignment of inline elements inside it. which your div's are not.

回复收藏 0 原文

~没有更多了~