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;
  }

链接到小提琴; https://jsfiddle.net/hLh55t7p/

Answer 1

您可以使用absolute这样的定位：

＆＃13;

.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%
}

＆＃13;

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

＆＃13;

Answer 2

以这种方式向文本边距添加负值：

.test {
  text-align: center;
}

.test div {
  margin-top: -70px;
}

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

HTML：

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

或者您可以使用position: absolute。

将文本放在<hr />的中间

2 个答案: