如何创建带有居中文本并使用 CSS 封顶的水平线？ [复制]答案

【问题标题】：How can I create a horizontal line with centered text and capped ends with CSS? [duplicate]如何创建带有居中文本并使用 CSS 封顶的水平线？ [复制]
【发布时间】：2019-09-15 03:53:03
【问题描述】：

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

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

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

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

【问题讨论】：

骗子展示了基本技术，最后使用另一个伪：jsfiddle.net/yv9dxqo4
OP 已经解决了链接问题中的问题。您的评论表明，构建垂直线需要进一步的解决方案，这就是问题所在。投票重新开放。

标签： css horizontal-line

【解决方案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>

【讨论】：