将 H2 居中略高于 parent div？

Question

我正在尝试将带样式的标题定位在居中位置，并使其略高于 parent div。我假设标题必须绝对定位才能通过在顶部添加负边距来移动到 parent 之外。当它的位置是相对的时，我可以将它居中，但我不能添加负边距以将它带到 parent.

之外

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

立即查看：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 2

我调整了 fiddle 以包含此 css 内容：

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

它似乎使 h2 居中并将其设置在 content div.

上方一点

但经过更深入的调查，看起来您只需要将 width 作为您的原始标签，并使用 box-sizing 规则来协助元素上的 padding/margin。

我将其附加到您现有的 .content-box-title css 并且效果很好：

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

Answer 3

通过将标题设为 inline-block，您可以在 parent div 上使用 text-align: center 将其居中。你不需要绝对定位或自动保证金，所以你可以只使用负的上边距。您可以在内容上使用 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.

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 居中略高于 parent div？

Center H2 slightly above it's parent div?

css

css-position