Question

我正在学习如何使用位置relative / absolute。

然而，我有点陷入困境。

我正在尝试将div中的div水平居中，但是当我添加margin: 0 auto;时，它什么也没做。

或者这是代码：

<!DOCTYPE HTML>
<html lang="en-UK">
    <head>
        <link href="DivTest.css" rel ="stylesheet" type="text/css">
        <title></title>
    </head>
    <body>
    <div id="header"></div>
    <div id="outer">
        <div id="inner"></div>
    </div>
    </body>
</html>

CSS：

body, html {
     margin: 0;
     width: 100%;
}

#header{
     position: relative;
     width: 100%;
     height: 200px;
     background-color: lightgreen;
     margin: 0 0 20px 0;
}

#outer{
     position: relative;
     width: 800px;
     height: 500px;
     background-color: red;
     margin: 0 auto;

}

#inner{
     position: absolute;
     width: 200px;
     height: 250px;
     background-color: lightblue;
     margin: 0 auto;
}

任何帮助都将不胜感激。

Answer 1

只需移除position:absolute;

的#inner属性即可

小提琴：http://jsfiddle.net/Q8NVH/7/

如何将div放在另一个div中？

1 个答案: