Question

我的问题集中在我的网站上。我希望这个容器居中并占据页面的大约80％。这样我就可以在其中放置图像滑块和文本。保证金：0自动，似乎没有工作。容器的背景颜色仅在position设置为absolute时显示。我在这里做错了什么？

CSS

@charset "utf-8";
/* CSS Document */

#container {
top: 125px;
left: 0;
margin: 0 auto;
width: 70%;
background-color: #b0e0e6;
height: 100%;
position: absolute;
}

#header {
background-color: #2f2f2f;
height: 125px;
top: 0;
left: 0;
position: fixed;
width: 100%;
margin: none;
padding: none;
z-index: 1;
}

#footer {
background-color: #2f2f2f;
height: 30px;
bottom: 0;
left: 0;
position: fixed;
width: 100%;
margin: none;
padding: none;
z-index: 1;
}

#logo {
position: fixed;
z-index: 2;
}

#logo img {
height: 100px;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>

<body>

<div id="logo"><img src="images/jpl101-300x254.png" /></div>
<div id="header"></div>
<div id="footer"></div>


<div id="container">




</div>
</body>
</html>

与我要做的相比，这就是我最终的结果。

enter image description here

Answer 1

您已将其设置为position: absolute，这意味着如果您还设置了margin: 0 auto，那么它只会以left:0;right:0;为中心：div { padding: 10px; background: #2d2d2d; color: #fff; font-weight: bold; text-transform: uppercase; } .center { position: absolute; margin: 0 auto; width: 70%; } .one { left:0; } .two { left:0; right:0; top: 200px; /* so you can see it */ }

<div class="center one">First</div>
<div class="center two">Second</div>

position: absolute

但实际上，你似乎不应该在这里使用{{1}}。

Answer 2

尝试（将边距更改为百分比）

#container {
margin: 0 15%;
width: 70%;
background-color: #b0e0e6;
height: 100%;
}

你的宽度为70％，所以从剩余的30％开始，你将它从每一边（左边和右边）除以2％，15％就完成了。 Here is something similar

Answer 3

你只需要添加一个权利：0;到您的容器强制保证金＆＃34;绑定＆＃34;在屏幕的右侧并自动填充边距。

Answer 4

您需要将margin-top代替position: absolute与top结合使用：

#container {
    margin: 0 auto;
    margin-top: 125px;
    width: 70%;
    background-color: #b0e0e6;
    height: 100%;
}

基本上那些position和margin并没有真正合作。

Answer 5

包裹你的div然后居中。

Example Fiddle

的CSS：

.containerWrapper{
    width: 100%;
    height: 100%;
    position: absolute;
}
#container {
 margin: 0 auto;
 width: 70%;
 background-color: #b0e0e6;
 height: 100%;
 position: relative;
}

HTML：

<div class="containerWrapper">
    <div id="container"></div>
</div>

Div容器不以margin auto为中心

5 个答案: