文本中间的水平线[重复]

Posted 2023-03-05

【中文标题】文本中间的水平线[重复]

【英文标题】：Horizontal line in the middle of text [duplicate]

【发布时间】：2013-04-07 05:47:23

【问题描述】：

我想在中间显示一条带有单词的水平线，如下所示：

我正在尝试，但不起作用：

HTML：

<h2><span>Test</span></h2>

CSS：

h2
    font-size: 100px;
    border-top: solid 1px black;
    width: 100%;
    height: 50px;
    margin-top: 25px;
    top: 50%;
    z-index: 1;    


span
     background: #fff;
      padding: 0 20px;
      margin-top:-25px;
       display: inline-block;
       z-index: 5;

JSFiddle： http://jsfiddle.net/2ds9a/

【问题讨论】：

请看我的问题，代码不起作用这就是我问这个问题的原因。

请参阅此重复问题的已接受答案。该代码确实有效。

【参考方案1】：

有不同的方法可以做到这一点， 这是我的解决方案：

http://jsfiddle.net/zzLnt/

   <h2><span class="line"></span><span class="text">Test<span></h2>
   <style> 
    h2
        font-size: 100px;
        z-index: 1;
        position: relative;
        text-align: center;
    

    .line
        background: #000;
        border-top: solid 1px black;
        position: absolute;
        height: 1px;
        display: block;
        top: 56px;
        width: 100%;
    

    .text
        background-color: #FFFFFF;
        z-index: 20;
        position: relative;
        text-align: center;
        padding: 0 34px;
    
</style>

【参考方案2】：

你可以习惯css :after

像这样

HTML

<h2><span  class="line-center">Test</span></h2>

CSS

.line-center
    margin:0;padding:0 10px;
    background:#fff;
    display:inline-block;

h2

    text-align:center;
    position:relative;
    z-index:2;


h2:after
    content:"";
    position:absolute;
    top:50%;
    left:0;
    right:0;
    border-top:solid 1px red;
    z-index:-1;

LIve Demo

【讨论】：

我更喜欢这种方法，它的语义和比这里找到的答案更清晰。***.com/questions/2812770/… 你应该在这个页面上发布你的分析器，因为这个问题可能会被关闭。

还值得一提的是，这在旧的 IE 中不起作用

IE8 + 支持 :after 现在检查所有 css 选择器 caniuse.com

嗨 @RohitAzad 请访问此链接：magento.stackexchange.com/questions/62827/… 他给出了答案 a)

【参考方案3】：

如this answer 所示（由Quentin 建议），以下代码应该适合您：

<div style="height: 2px; background-color: black; text-align: center">
  <span style="background-color: white; position: relative; top: -0.5em;">
    Section Title
  </span>
</div>

欲了解更多信息，请查看this question.

【讨论】：

jsfiddle: jsfiddle.net/vwbpmuss

为我工作谢谢！