【问题标题】：how to use <hr> in mid line in html? [duplicate]如何在html中线使用<hr>？ [复制]
【发布时间】：2014-01-30 06:34:00
【问题描述】：

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

我想展示这样的东西-

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

但我希望上面的线是实心的。

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

- 1 你只有一侧有线
对不起。现在，我解决了这个问题。现在试试更新的小提琴。
+1 :) 修复错误
感谢您向我展示错误。之前的演示在 chrome 中正常工作。但是，不能在 Firefox 中工作。这就是为什么我没有注意到错误。

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：

我也喜欢这种方法，+1 我的方法非常简单。

【解决方案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

【讨论】：

【解决方案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>

【讨论】：