Question

我想在页面中间有一条水平线。有点像

<div class="line">
  <hr>
</div>

.line {
  top: 50%;
}

但这不起作用。我不想像

一样自己写这行

<p> _______________________________________</p>

有没有办法让人力资源居中？

Answer 1

在设置top属性之前，您需要从文档的正常流程中取出行。试试这个

＆＃13;

.line {
   position:absolute;
   width:100%;
   top: 50%;
}

＆＃13;

<hr class="line">

＆＃13;

JS小提琴：https://jsfiddle.net/q9o5q70z/

Answer 2

使用<hr>标记，它的用途是什么。

Answer 3

这是一个示例标记和样式表，以使hr正常工作。我将两个宽度设置为（粗略地）占据页面的整个高度，然后用一条水平线来划分它们。

只需运行下面的代码段，或查看Demo here。

div {
  height: 45vh;
}

span {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

hr {
  height: 2px;
  background: red;
  border: 0;
}

<div>
  <span>some content</span>
</div>
<hr>
<div>
  <span>other content</span>
</div>

页面中间的水平线

3 个答案: