如何在html的中间行使用<hr />？

Question

我见过很多教程，但在任何地方找不到解决方案。我在html中使用hr标签在顶部和底部显示线条，它正常工作。但是当我尝试使用hr标签在中心显示线时，它不起作用。我想在中心显示线条，也想在那里显示一些文字。因为我是新手，如果有人帮我一些代码，这很容易学习。

我想展示这样的东西 -

------------------------Hello--------------------------

但我希望上面的这一行是稳固的。

Answer 1

试试这个

UPDATED FIDDLE

HTML

<div>
   <div><hr></div>
   <span> Hello  </span>
   <div><hr></div>
</div>

CSS

div {
  width:300px;
  text-align:center;
  display:table;
}
div > div {
   display:table-cell;
   vertical-align:middle;
}
div > span {
   white-space:nowrap;
}

Answer 2

jsFiddle：http://jsfiddle.net/theStudent/56Q2F/2/

<div style="height: 1px; background-color: black; text-align: center">
  <span style="background-color: white; position: relative; top: -0.55em; padding: 5px;">
    HELLO WORLD
  </span>
</div>

Answer 3

试试这个

http://jsfiddle.net/9Y2Z4/

<div>sometext</div>
<div class="line">test here</div>
<div>again some text</div>

<强> CSS：

.line {
     height: 0.5em;
    text-align: center;

    border-bottom: 2px solid Red;
    margin-bottom: 0.5em;
}
.line:first-line {
    background-color: white;
}

Answer 4

HTML

  <div class="divline"> <span class="spans">
        HELLO WORLD
      </span>

    </div>

<强> CSS

.divline {
    height: 1px;
    background-color: black;
    text-align: center;
}
.spans {
    background-color: white;
    position: relative;
    top: -0.55em;
    padding: 5px;
}

Working Fiddle

Check this too

Answer 5

每个<hr>元素将规则返回到行的开头（回车）。你可以试试这个：

.line{
    width:100px;
    height:1px;
    background:#ff0000;
    float:left;
    margin-top: 10px;
}
.text{
    float:left;
}

HTML：

<div class="line"></div>
<div class="text">Hello</div>
<div class="line"></div>