css - 将 H2 居中略高于它的父 div？

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

通过将标题设为行内 block ，您可以在父 div 上使用 text-align: center 将其居中。你不需要绝对定位或自动 margin ，所以你可以只使用负的上边距。您可以在内容上使用 text-align left 来保持左对齐:

.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 .