REAL SOLUTION

Question

我有一些简单的HTML代码，我正在为一个简单的网站构建基本布局。

我正在尝试将红色条放在绿色区域内垂直居中。出于某种原因，当我添加上边距时，它不会向下移动。我一直试图找出半小时的原因 - 太令人沮丧了！

以下是代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Basic</title>
</head>
<body>
  <div id="milestone">
      <div id="milestonecontent">
          <div id="event">
           </div>
      </div>
      <div class="actions">
      </div>
  </div>
</body>
</html>

CSS：

#body{
  background-color: #e9eaed;
}

#milestone{
  width: 512px;
  height: 137px;
  background-color: blue;

}

#milestonecontent{
  width: 512px;
  height: 104px;
  background-color: green;
}
#event{
  position: relative;
  margin: 10px auto;
  width: 512px;
  height: 58px;
  background-color: red;

}
.actions{
  border-top: 1px solid #e9eaed;
  position: relative;
  width: 512px;
  height: 33px;
  background-color: grey;
}

Answer 1

您可以将display: inline-block;添加到#event DIV。

#event {
    display: inline-block;
    margin-top: 23px;
}

<强> Demo

Answer 2

您可以将其设为@AfromanJ建议的内联块元素，或者您可以：

2）在包裹元素#milestonecontent

中添加填充顶部

3）向包裹元素border: 1px solid transparent;添加1px或更多透明#milestonecontent .....但

REAL SOLUTION

是将overflow:auto添加到包装元素#milestonecontent

小提琴： http://jsfiddle.net/Hut9M/12/
的代码：

#milestonecontent{ width: 512px; height: 104px; background-color: green; overflow: auto; }

此处也解决了：CSS: Margin-top when parent's got no border

Answer 3

默认情况下，div等块元素有width:auto。您可以将padding-top提供给父级milestonecontent和margin:0 auto;至event容器，这将使所有分辨率保持中心。

对我修改过的内容有点了解，

#milestonecontent{
  height: 104px;
  padding-top:20px;
  background-color: green;
}

#event{
  margin: 0 auto;
  width: 300px;
  height: 58px;
  background-color: red;
}

Working Demo

HTML不允许我添加上边距

3 个答案:

REAL SOLUTION