html - 将文本放在 <hr> 的中间

Question

基本上，我希望在我的文本后面有一个 hr 并且我的文本将位于它的中间。

这是一些示例标记:

<div class="test">
  <hr class="middle-line"/>
  Some Text
</div>

.test {
  text-align: center;
}

hr.middle-line {
    width: 0px;
    height: 100px;
    z-index: -1;
  }

链接到 fiddle ； https://jsfiddle.net/hLh55t7p/

Answer 1

您可以像这样使用绝对定位:

.test {
  text-align: center;
  position: relative
}

hr.middle-line {
    width: 0px;
    height: 100px;
    z-index: -1;
}
.test p{
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%
}

<div class="test">
  <hr class="middle-line"/>
  <p>Some Text</p>
</div>