Question

我正在尝试将一个样式化的标题定位在中心位置并稍微高于它的父div。我假设标题必须绝对定位，以便能够通过在顶部添加负边距而转移到父级之外。当它的位置相对时，我可以将它置于中心位置，但我无法添加负余量以使其超出父级。

HTML

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="content">
                <h2 class="content-box-title">A Heading</h2>
                <div class="content-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, culpa illum! Sint maiores numquam provident, consequatur voluptatibus, repudiandae, dolorum sed, itaque saepe magni fugit mollitia! Repellat dignissimos, quas esse itaque.</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.content {
  position: relative;
  background-color: #d5d5d5;
}

.content-box-title {
    position: absolute;
    background-color: grey;
    text-align: center;
    padding: 10px;
    margin: -40px auto;
}

.content-body {
    padding: 20px;
}

http://jsfiddle.net/LsohxL3m/

Answer 1

我调整了这个小提琴来包含这个css内容：

.content h2 {
box-sizing: border-box;
margin: -60px auto 0;
width: 100%;
}

它似乎将h2居中，并将其设置在content div之上。

但经过深入调查后，看起来您只需要将width作为原始代码，并使用大小调整规则来辅助元素上的填充/边距。

我将此附加到您现有的.content-box-title css，它运行良好：

width: 100%;
box-sizing: border-box;

Answer 2

通过使标题成为内联块，您可以在父div上使用text-align: center将其居中。您不需要绝对定位或自动保证金，因此您可以使用负的上限。您可以在内容上使用左对齐文本以保持左对齐：

.content {
  background-color: #d5d5d5;
    text-align: center;
}

.content-box-title {
    display: inline-block;
    background-color: grey;
    text-align: center;
    padding: 10px;
    margin-top: -40px;
}

.content-body {
    padding: 20px;
    text-align: left;
}

Here's a fiddle

Answer 3

立即检查：http://jsfiddle.net/LsohxL3m/1/

我改变了标题的样式，如下所示：

.content-box-title {
    background-color: grey;
    text-align: center;
    padding: 10px;
    margin-top: -40px;
    margin-left: auto;
    margin-right: auto; 
}

Answer 4

您可以使用翻译：

.content-box-title {
    position: absolute;
    background-color: grey;
    text-align: center;
    padding: 10px;
    margin-top: -40px;
    left:50%;
    transform: translate(-50%, 0);
}

http://jsfiddle.net/LsohxL3m/6/

Answer 5

更改

.content-box-title {
    position: absolute;
    background-color: grey;
    text-align: center;
    padding: 10px;
    margin: -40px auto;
}

.content-body {
    padding: 20px;
}

到

.content-box-title {
   transform: translateY(-60px);
   background-color: grey;
   margin-top: 60px;
   text-align: center;
   padding: 10px;
}
.content-body {
   padding: 0 20px 20px 20px;
}

这是sample

中心H2略高于它的父级div？

5 个答案: