Question

我无法使用css对我的网页进行居中：

下面的CSS代码：

#wrapper {
  margin-left:auto;
  margin-right:auto;
  width: 100px;
}

#welcome {
    position:absolute;
    top:202px;
    width:560px;
    height:224px;
    z-index:2;
}
#newsSection {
    position:absolute;
    left:576px;
    top:209px;
    width:380px;
    height:600px;
    z-index:2;
}

HTML：

<body>
<div id="wrapper">
 <div id="welcome">
    //content here
 </div>
 <div id="newsSection">
    //content here
 </div>
</div>
</body>

我可以将网页居中，除了＃newsSection div。

我把＃left：576px放在#newsSection div下的原因是因为我希望它把它放在#welcome div旁边。（并排）然而，当我收缩浏览器大小时，＃newsSection div将向左移动一点并重叠#welcome div 如果我删除“left：57px”，则#newsSection div将出现在#welcome div的顶部...

请帮忙。感谢

Answer 1

这可能是因为你在子div上使用绝对位置。因此，“孩子们会狂奔”，因为他们并不关心父div＃wrapper是中心。

一些潜在的代码：


#wrapper {
  margin-left:auto;
  margin-right:auto;
  width: 100px;
}

#welcome {
    float: left;
    width:560px;
    height:224px;
}
#newsSection {
    float: left;
    width:380px;
    height:600px;
}

Answer 2

你应该使用相对定位，即tagname.class {position：relative;右上：？ ;}

Answer 3

要使网页居中，您可以使用此功能：

.container{
   width: 100%;
   max-width:80%;
   margin: 0 auto;
}

CSS中心网页问题

3 个答案: