如何创建带有居中文本和CSS封顶的水平线？

Question

关于如何创建带有居中文本和左右两边水平线的标题有很多问题（和答案），但是我想要实现的目标略有不同。

我想在垂直线的左右两端添加垂直线：

我已经接近使用此代码的要求：

body {
  padding: 50px;
}

div.outer {
  width: 100%;
  height: 15px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  text-align: center;
  margin: auto;
  position: relative;
}

div.outer>span {
  font-size: 16px;
  background-color: #FFF;
  padding: 0 10px;
  position: absolute;
  top: -10px;
  left: 47%;
}

<div class="outer">
  <span>A Heading</span>
</div>

pen

有人可以指出正确的方向吗？

更新

感谢@nvioli向我指出正确的方向。我最终根据this post

使用了您的答案和flex

这对我有用：pen

Answer 1

我建议您在此处之外再添加一个div。您做得很好，制作了水平线并将文本居中（这是IMO的难部分），因此将整个内容包裹在一个更大的div（两倍高）中，并将内部div下移一半高度似乎可行

请注意，我已将您的outer div重命名为inner，并添加了一个新的outer。

body {
  padding: 50px;
}

div.outer {
  border-right: 1px solid black;
  border-left: 1px solid black;
  height:30px;
}

div.inner {
  width: 100%; 
  height: 15px; 
  border-top: 1px solid black; 
  text-align: center;
  margin: auto;
  position: relative;
  top:15px;
}

div.inner > span {
  font-size: 16px; 
  background-color: #FFF; 
  padding: 0 10px;
  position: absolute;
  top: -10px;
  left: 47%;
}

<div class="outer">
  <div class="inner">
    <span>A Heading</span>
  </div>
</div>