如何在html中线使用<hr>？ [复制]

Posted 2023-03-05

【中文标题】如何在html中线使用<hr>？ [复制]

【英文标题】：how to use <hr> in mid line in html? [duplicate]

【发布时间】：2014-01-30 06:34:00

【问题描述】：

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

我想展示这样的东西-

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

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

【参考方案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>