Question

我试图让H2出现在DIV的中间位置（即它在图像中间垂直显示）但是，当我向H2添加margin-top时，它似乎添加了它也是DIV。

问题是什么，解决方案是什么？

<div>
    <div class="container">
        <style type="text/css" scoped>
            .container {
                background-image: url("http://lorempixel.com/500/250/business/");
                background-repeat: no-repeat; 
            }
            h2 { margin-top: 200px;}
        </style>
        <h2>Heading</h2>
        <p>Description</p>
    </div>
</div>

Answer 1

问题是边距为collapsing：

相互接触的不同元素的垂直边距（因此没有内容，填充或分隔它们的边框）将崩溃，形成单个边距，该边距等于相邻边界中的较大边距利润率。在水平边距（左和右）上不会发生这种情况，只有垂直（顶部和底部）。

不是黑客攻击的最佳解决方案是将margin更改为padding并重置默认的h2 margin-top：
```
h2 { padding-top: 200px; margin-top:0;}
```
如果填充不合适，还有一些其他可能的解决方案可以防止默认崩溃：
- .container {border: 1px solid transparent}
- .container {padding: 1px}
- h2 {display: inline-block;}
你说你希望：

让H2出现在DIV的一半

使用百分比来支持不同的容器大小可能更好。考虑做这样的事情：

＆＃13;

.container {
   background-image: url("http://lorempixel.com/500/250/business/");
   background-repeat: no-repeat; 
   height:250px;
   position:relative;
}

.go-down { 
   top:50%; 
   position:absolute;
}
            
.go-down h2 {
   margin:0;
}

＆＃13;

<div>
    <div class="container">
        <div class="go-down">
            <h2>Heading</h2>
            <p>Description</p>
        </div>
    </div>
</div>

＆＃13;

子元素的边距添加到父DIV

1 个答案: