css - 如何使用 CSS 创建一条文本居中、两端封顶的水平线？

Question

<分区>

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>