1

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

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

示例标题

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

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>

笔

谁能指出我正确的方向？

更新

感谢@nvioli 为我指明了正确的方向。我最终根据这篇文章结合了您的答案和弹性

这对我有用：钢笔

4

1 回答 1

0

我建议在你所拥有的之外添加另一个 div。你做得很好，使水平线和文本居中（这是 IMO 中最难的部分），所以将整个东西包裹在一个更大的 div 中（两倍高）并将内部 div 向下移动一半高度似乎工作.

请注意，我已将您的outerdiv 重命名为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>

于 2019-04-25T16:40:34.963 回答