【问题标题】:CSS technique for a horizontal line with words in the middle中间有单词的水平线的CSS技术
【发布时间】:2011-07-10 00:07:36
【问题描述】:

我正在尝试制作一条中间有一些文字的水平线。 例如:

------------------------我的标题在这里--------- --------------------

有没有办法在 CSS 中做到这一点?显然没有所有的“-”破折号。

【问题讨论】:

标签: html css cross-browser


【解决方案1】:
<div><span>text TEXT</span></div>

div { 
  height: 1px; 
  border-top: 1px solid black; 
  text-align: center; 
  position: relative; 
}
span { 
  position: relative; 
  top: -.7em; 
  background: white; 
  display: inline-block; 
}

给 span 一个填充以在文本和行之间留出更多空间。

示例:http://jsfiddle.net/tUGrf/

【讨论】:

  • 很好,唯一的问题是您必须将背景设置为白色并且不能将其设置为透明。
  • 在这种情况下,您必须使用两行,每侧一个。这将很难以干净的方式实现..
  • 到目前为止我最喜欢的方法,但不幸的是,由于某种原因,它在电子邮件客户端中不起作用(Gmail 移动和网络)
【解决方案2】:

我不太确定,但您可以尝试使用水平线并将文本推到其上边距上方。您的段落标签和背景也需要固定宽度。这有点hacky,我不知道它是否适用于所有浏览器,您需要根据字体大小设置负边距。虽然适用于铬。

<style>   
 p{ margin-top:-20px; background:#fff; width:20px;}
</style>

<hr><p>def</p>

【讨论】:

    【解决方案3】:

    这就是我的大致做法:通过在包含的h2 上设置border-bottom 然后给h2 一个较小的line-height 来创建行。然后将文本放入具有非透明背景的嵌套span 中。

    h2 {
       width: 100%; 
       text-align: center; 
       border-bottom: 1px solid #000; 
       line-height: 0.1em;
       margin: 10px 0 20px; 
    } 
    
    h2 span { 
        background:#fff; 
        padding:0 10px; 
    }
    <h2><span>THIS IS A TEST</span></h2>
    <p>this is some content other</p>

    我只在 Chrome 中进行了测试,但没有理由它不应该在其他浏览器中运行。

    JSFiddle:http://jsfiddle.net/7jGHS/

    【讨论】:

    • 这是我最喜欢的解决方案。它也适用于 OSX,而​​其他一些则不适用。如果您使用此解决方案,请记住将跨度的背景设置为与页面背景相同的颜色,如果您的背景不是白色,我的意思会特别明显。 ;)
    • 有什么方法可以把它弄到大约四分之一?
    • 使用 "text-align:left; text-indent:40px;" 获取从左侧缩进的文本在 h2 样式中。
    • 这不灵活,因为您将文本的背景颜色固定为白色。
    • @NateBarbettini 除非你试图做的那一行,而且文本需要有透明背景,以供其后面的其他内容使用。
    【解决方案4】:

    好的,这个比较复杂,但它适用于除 IE 之外的所有应用

    <div><span>text TEXT</span></div>
    
    div {
        text-align: center;
        position: relative;
    }
    span {
        display: inline-block;    
    }
    span:before,
    span:after {
        border-top: 1px solid black;
        display: block;
        height: 1px;
        content: " ";
        width: 40%;
        position: absolute;
        left: 0;
        top: 1.2em;
    }
    span:after {
       right: 0;  
       left: auto; 
    }
    

    :before 和 :after 元素是绝对定位的,所以我们可以将一个拉到左边,一个拉到右边。此外,宽度(在这种情况下为 40%)非常依赖于内部文本的宽度.. 必须为此考虑解决方案。至少top: 1.2em 可以确保线条或多或少地位于文本的中心,即使您的字体大小不同。

    它似乎运作良好:http://jsfiddle.net/tUGrf/3/

    【讨论】:

    • 这些很聪明,但我当然希望 OP 不希望在 form 标签内使用它。如果他这样做了,我相信你知道,他可以简单地使用 fieldsetlegend
    • 嘿,你说得对。如果这不起作用,也可以继续这样做..在语义上不正确,但它比不得不求助于 javascript 之类的 imo 更好。
    • 我发现在屏幕驻留且不设置文本背景颜色的情况下效果很好的最佳解决方案是jsfiddle.net/vLwDf/268
    • 是的@xavier-john,那是我的answer ;)
    【解决方案5】:

    在尝试了不同的解决方案后,我提供了一种适用于不同文本宽度、任何可能背景且无需添加额外标记的解决方案。

    h1 {
      overflow: hidden;
      text-align: center;
    }
    
    h1:before,
    h1:after {
      background-color: #000;
      content: "";
      display: inline-block;
      height: 1px;
      position: relative;
      vertical-align: middle;
      width: 50%;
    }
    
    h1:before {
      right: 0.5em;
      margin-left: -50%;
    }
    
    h1:after {
      left: 0.5em;
      margin-right: -50%;
    }
    <h1>Heading</h1>
    <h1>This is a longer heading</h1>

    我在 IE8、IE9、Firefox 和 Chrome 中进行了测试。你可以在这里查看http://jsfiddle.net/Puigcerber/vLwDf/1/

    【讨论】:

    • 我也最喜欢这个。要获得文本从左侧缩进而不是居中的样式,请使用以下更改:h1 { overflow:hidden; ` 文本对齐:左; ` 文本缩进:40px; `}
    • 这确实是一个很好的解决方案;特别是因为它适用于任何背景,并且不需要在标题元素上设置宽度。
    • 这很棒。我稍微调整了您的代码以使文本左对齐并使:after 元素成为块的宽度。我很好奇:margin-right: -50%的作用到底是什么?当我在摸索代码时,缺少该属性会使装饰中断到另一行。即使:after 被分配了 100% 的宽度,我仍然需要 50% 的负边距来使其适合。为什么?
    • 我喜欢这个解决方案的一个原因是它适用于您不知道背景是什么颜色的情况。到目前为止,这个问题的最佳解决方案很容易。
    • 我用占位符 codepen.io/cmichael110/pen/KJLxBq 创建了一个 scss 示例。 @Matt__C 您的左对齐解决方案也是一件好事 - 也许这里有人可以用全宽线扩展它。
    【解决方案6】:

    IE8 及更高版本的解决方案...

    值得注意的问题:

    使用background-color 屏蔽边框可能不是最佳解决方案。如果您有复杂(或未知)的背景颜色(或图像),遮罩最终会失败。此外,如果您调整文本大小,您会注意到白色背景颜色(或您设置的任何颜色)将开始覆盖上方(或下方)行上的文本。

    您也不想“猜测”这些部分的宽度,因为它使样式非常不灵活,几乎不可能在内容宽度的响应式网站上实现在改变。

    解决方案:

    (查看JSFiddle)

    不要使用background-color“屏蔽”边框,而是使用您的display 属性。

    HTML

    <div class="group">
        <div class="item line"></div>
        <div class="item text">This is a test</div>
        <div class="item line"></div>
    </div>
    

    CSS

    .group { display: table; width: 100%; }
    .item { display: table-cell; }
    .text { white-space: nowrap; width: 1%; padding: 0 10px; }
    .line { border-bottom: 1px solid #000; position: relative; top: -.5em; }
    

    通过将font-size 属性放在.group 元素上来调整文本大小。

    限制:

    • 没有多行文本。仅限单行。
    • HTML 标记没有那么优雅
    • .line 元素上的 top 属性需要是 line-height 的一半。所以,如果你有一个line-height1.5em,那么top 应该是-.75em。这是一个限制,因为它不是自动化的,如果您将这些样式应用于具有不同行高的元素,那么您可能需要重新应用您的 line-height 样式。

    对我来说,这些限制超过了我在回答开头提到的大多数实现的“问题”。

    【讨论】:

    • 适用于 chrome。看起来语义和相当简单。与引导程序一起使用。
    • 我不得不将border-collapse:separate 添加到.group 中,因为我在具有不同设置的表格中使用它。效果很好。
    【解决方案7】:

    最短最好的方法:

    span:after,
    span:before{
        content:"\00a0\00a0\00a0\00a0\00a0";
        text-decoration:line-through;
    }
    &lt;span&gt; your text &lt;/span&gt;

    【讨论】:

    • 在我的情况下,行似乎有点粗,所以我通过分配不同的字体系列来破解它:font-family: monospace; 工作正常。
    • 这是最好的答案。在没有改变我的布局的情况下工作。
    【解决方案8】:

    我一直在寻找这个简单装饰的一些解决方案,我发现了很多,有些奇怪,有些甚至用 JS 来计算字体的高度和 bla,bla,bla,然后我'我已经阅读了这篇文章中的内容,并阅读了来自 thirtydot 的关于 fieldsetlegend 的评论,我认为就是这样。

    我正在覆盖这 2 种元素样式,我想您可以为它们复制 W3C 标准并将其包含在您的 .middle-line-text 类(或任何您想要的名称)中,但这就是我所做的:

    <fieldset class="featured-header">
        <legend>Your text goes here</legend>
    </fieldset>
    
    <style>
    .featured-header{
        border-bottom: none;
        border-left: none;
        border-right: none;
        text-align: center;
     }
    
    .featured-header legend{
        -webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
        -webkit-padding-end: 8px; 
        background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
        font-weight: normal; /* I preffer the text to be regular instead of bold  */
        color: YOU_CHOOSE;
    }   
    
    </style>
    

    这是小提琴:http://jsfiddle.net/legnaleama/3t7wjpa2/

    我使用过边框样式,它也适用于 Android ;)(在 kitkat 4.XX 上测试)

    编辑:

    按照 Bekerov Artur 的想法(这也是一个不错的选择),我更改了 .png base64 图像以使用 .SVG 创建笔触,这样您就可以在任何分辨率下进行渲染,也可以在不使用任何其他软件的情况下更改元素的颜色参与:)

    /* SVG solution based on Bekerov Artur */
    /* Flexible solution, scalable, adaptable and also color customizable*/
    .stroke {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
    background-repeat: repeat-x;
    background-position: left;
    text-align: center;
    }
    .stroke h3 {
    background-color: #ffffff;
    margin: 0 auto;
    padding:0 10px;
    display: inline-block;
    font-size: 66px;
    }
    

    【讨论】:

      【解决方案9】:

      编辑 (09/2020)

      display:flex 方法似乎是当今最可靠、最容易实施的方法。


      写于 2015 年 3 月 17 日 17:06:

      对于以后(现在)浏览器,display:flexpseudo-elements 可以轻松绘制而无需额外的标记。

      border-stylebox-shadow 甚至 background 也有助于化妆,如果你需要它花哨或丑陋。

      h1 {margin-top:50px;
        display:flex;
        background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
      }
      h1:before, h1:after {
        color:white;
        content:'';
        flex:1;
        border-bottom:groove 2px;
        margin:auto 0.25em;
        box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
      }
      &lt;h1&gt;side lines via flex&lt;/h1&gt;

      资源(2020 年 9 月添加)

      【讨论】:

      • 完美,只有当背景是图像时对我有用的解决方案
      • 我认为这是最好的解决方案。为了简化你的代码,你可以去掉颜色:white;
      【解决方案10】:

      如果有人想知道如何设置标题,使其与左侧有固定距离(而不是如上所示居中),我通过修改 @Puigcerber 的代码来解决这个问题。

      h1 {
        white-space: nowrap;
        overflow: hidden;
      }
      
      h1:before, 
      h1:after {
        background-color: #000;
        content: "";
        display: inline-block;
        height: 1px;
        position: relative;
        vertical-align: middle;
      }
      
      h1:before {
        right: 0.3em;
        width: 50px;
      }
      
      h1:after {
        left: 0.3em;
        width: 100%;
      }
      

      这里是JSFiddle

      【讨论】:

        【解决方案11】:
        h6 {
            font: 14px sans-serif;
            margin-top: 20px;
            text-align: center;
            text-transform: uppercase;
            font-weight: 900;
        }
        
            h6.background {
                position: relative;
                z-index: 1;
                margin-top: 0%;
                width:85%;
                margin-left:6%;
            }
        
                h6.background span {
                    background: #fff;
                    padding: 0 15px;
                }
        
                h6.background:before {
                    border-top: 2px solid #dfdfdf;
                    content: "";
                    margin: 0 auto; /* this centers the line to the full width specified */
                    position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
                    top: 50%;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    width: 95%;
                    z-index: -1;
                }
        

        这对你有帮助


        行间

        【讨论】:

        • ​​
          我们的服务
          这是html代码
        • Joe,您可以edit 您自己的答案来添加 HTML 代码 - 比将其放入 cmets 好得多。您还应该在答案中添加一些解释。
        • 对不起,Mogsdad 我忘了放html代码,所以放在这里。
        【解决方案12】:

        我使用表格布局动态填充边,使用 0 高度、绝对位置的 div 进行动态垂直定位:

        • 没有硬编码尺寸
        • 没有图片
        • 没有伪元素
        • 尊重背景
        • 控制栏外观

        https://jsfiddle.net/eq5gz5xL/18/

        我发现稍微低于真实中心的文字看起来最好;这可以在55% 所在的位置进行调整(更高的高度使条形更低)。可以在border-bottom 所在的位置更改线条的外观。

        HTML:

        <div class="title">
          <div class="title-row">
            <div class="bar-container">
              <div class="bar"></div>
            </div>
            <div class="text">
              Title
            </div>
            <div class="bar-container">
              <div class="bar"></div>
            </div>
          </div>
        </div>
        

        CSS:

        .title{
          display: table;
          width: 100%
          background: linear-gradient(to right, white, lightgray);
        }
        .title-row{
          display: table-row;
        }
        .bar-container {
          display: table-cell;
          position: relative;
          width: 50%;
        }
        .bar {
          position: absolute;
          width: 100%;
          top: 55%;
          border-bottom: 1px solid black;
        }
        .text {
          display: table-cell;
          padding-left: 5px;
          padding-right: 5px;
          font-size: 36px;
        }
        

        【讨论】:

          【解决方案13】:

          我已经尝试了大多数建议的方法,但以一些问题结束,例如全宽或不适合动态内容。最后我修改了一个代码,并且完美运行。此示例代码将在前后绘制这些线条,并且内容更改非常灵活。中心对齐也。

          HTML

                  <div style="text-align:center"> 
                      <h1>
                          <span >S</span>
                      </h1> 
                  </div> 
          
                  <div style="text-align:center"> 
                      <h1>
                          <span >Long text</span>
                      </h1> 
                  </div> 
          

          CSS

                h1 {
                      display: inline-block;
                      position: relative;
                      text-align: center;
                  }
          
                  h1 span {
                      background: #fff;
                      padding: 0 10px;
                      position: relative;
                      z-index: 1;
                  }
          
                  h1:before {
                      background: #ddd;
                      content: "";
                      height: 1px;
                      position: absolute;
                      top: 50%;
                      width: calc(100% + 50px);//Support in modern browsers
                      left: -25px;
                  }
          
                  h1:before {
                      left: ;
                  }
          

          结果: https://jsfiddle.net/fasilkk/vowqfnb9/

          【讨论】:

            【解决方案14】:

            .hr-sect {
            	display: flex;
            	flex-basis: 100%;
            	align-items: center;
            	color: rgba(0, 0, 0, 0.35);
            	margin: 8px 0px;
            }
            .hr-sect::before,
            .hr-sect::after {
            	content: "";
            	flex-grow: 1;
            	background: rgba(0, 0, 0, 0.35);
            	height: 1px;
            	font-size: 0px;
            	line-height: 0px;
            	margin: 0px 8px;
            }
            &lt;div class="hr-sect"&gt;Text&lt;/div&gt;

            【讨论】:

              【解决方案15】:

              这为您提供了固定长度的线条,但效果很好。 行长通过添加或获取 '\00a0'(unicode 空间)来控制。

              h1:before, h1:after {
                content:'\00a0\00a0\00a0\00a0';
                text-decoration: line-through;
                margin: auto 0.5em;
              }
              &lt;h1&gt;side lines&lt;/h1&gt;

              【讨论】:

                【解决方案16】:

                这是基于 Flex 的解决方案。

                h1 {
                  display: flex;
                  flex-direction: row;
                }
                h1:before, h1:after{
                  content: "";
                  flex: 1 1;
                  border-bottom: 1px solid;
                  margin: auto;
                }
                h1:before {
                  margin-right: 10px
                }
                h1:after {
                  margin-left: 10px
                }
                &lt;h1&gt;Today&lt;/h1&gt;

                JSFiddle:https://jsfiddle.net/j0y7uaqL/

                【讨论】:

                • 如何获得填充?
                • 又快又脏,你可以加一个  
                • 我使用另一个元素:&lt;h1&gt;&lt;span&gt;Today&lt;/span&gt;&lt;/h1&gt;,在跨度上带有边距/填充。
                • 填充是通过您在演示中看到的现有左/右边距实现的。
                【解决方案17】:

                不要打死马,但我正在寻找解决方案,最终来到这里,并且我自己对这些选项不满意,尤其是由于某种原因,我无法让这里提供的解决方案正常工作为了我。 (可能是由于我自己的错误...)但是我一直在玩 flexbox,这是我为自己工作的东西。

                某些设置是硬连线的,但仅用于演示目的。我认为这个解决方案应该适用于几乎任何现代浏览器。只需删除/调整 .flex-parent 类的固定设置,调整颜色/文本/内容,(我希望)您会像我一样对这种方法感到满意。

                HTML:

                .flex-parent {
                  display: flex;
                  width: 300px;
                  height: 20px;
                  align-items: center;
                }
                
                .flex-child-edge {
                  flex-grow: 2;
                  height: 1px;
                  background-color: #000;
                  border: 1px #000 solid;
                }
                .flex-child-text {
                  flex-basis: auto;
                  flex-grow: 0;
                  margin: 0px 5px 0px 5px;
                  text-align: center;
                }
                <div class="flex-parent">
                  <div class="flex-child-edge"></div>
                  <div class="flex-child-text">I found this simpler!</div>
                  <div class="flex-child-edge"></div>
                </div>

                我还在这里保存了我的解决方案: https://jsfiddle.net/Wellspring/wupj1y1a/1/

                【讨论】:

                • 简单而甜美,与tailwind css完美配合,以及此解决方案,感谢分享
                【解决方案18】:

                对我来说,这个解决方案效果很好......

                HTML

                &lt;h2 class="strikethough"&gt;&lt;span&gt;Testing Text&lt;/span&gt;&lt;/h2&gt;

                CSS

                .strikethough {
                 width:100%; 
                 text-align:left; 
                 border-bottom: 1px solid #bcbcbc; 
                 overflow: inherit;
                 margin:0px 0 30px;
                 font-size: 16px;
                 color:#757575;
                 }
                .strikethough span {
                 background:#fff; 
                 padding:0 20px 0px 0px;
                 position: relative;
                 top: 10px;
                }
                

                【讨论】:

                  【解决方案19】:

                  使用Bootstrap 4的人可以用这个方法实现。 HTML 代码中提到的类来自 Bootstrap 4。

                  h1 {
                      position: relative;
                      flex-grow: 1;
                      margin: 0;
                  }
                  
                  h1:before {
                     content: "";
                     display: block;
                     border-top: solid 2px blue;
                     width: 100%;
                     height: 1px;
                     position: absolute;
                     top: 50%;
                     z-index: 1;
                   }
                   h1 span {
                     background: #fff;
                     left: 12%;
                     padding: 0 15px;
                     position: relative;
                     z-index: 5;
                   }
                  

                  然后像这样编写你的 HTML

                  <div class="d-flex flex-row align-items-center">
                    <h1><span> Title </span> </h1>
                  </div>
                  

                  【讨论】:

                    【解决方案20】:

                    水平垂直字在中间

                    .box{
                        background-image: url("https://i.stack.imgur.com/N39wV.jpg");
                        width: 350px;
                        padding: 10px;
                    }
                    
                    /*begin first box*/
                    .first{
                        width: 300px;
                        height: 100px;
                        margin: 10px;
                        border-width: 0 2px 0 2px;
                        border-color: red;
                        border-style: solid;
                        position: relative;
                    }
                    
                    .first span {
                        position: absolute;
                        display: flex;
                        right: 0;
                        left: 0;
                        align-items: center;
                    }
                    .first .foo{
                        top: -8px;
                    }
                    .first .bar{
                        bottom: -8.5px;
                    }
                    .first span:before{
                        margin-right: 15px;
                    }
                    .first span:after {
                        margin-left: 15px;
                    }
                    .first span:before , .first span:after {
                        content: ' ';
                        height: 2px;
                        background: red;
                        display: block;
                        width: 50%;
                    }
                    
                    
                    /*begin second box*/
                    .second{
                        width: 300px;
                        height: 100px;
                        margin: 10px;
                        border-width: 2px 0 2px 0;
                        border-color: red;
                        border-style: solid;
                        position: relative;
                    }
                    
                    .second span {
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }
                    .second .foo{
                        left: -15px;
                    }
                    .second .bar{
                        right: -15.5px;
                    }
                    .second span:before{
                        margin-bottom: 15px;
                    }
                    .second span:after {
                        margin-top: 15px;
                    }
                    .second span:before , .second span:after {
                        content: ' ';
                        width: 2px;
                        background: red;
                        display: block;
                        height: 50%;
                    }
                    <div class="box">
                        <div class="first">
                            <span class="foo">FOO</span>
                            <span class="bar">BAR</span>
                        </div>
                    
                       <br>
                    
                        <div class="second">
                            <span class="foo">FOO</span>
                            <span class="bar">BAR</span>
                        </div>
                    </div>

                    https://stackoverflow.com/a/57279326/6569224也回答了这个问题

                    【讨论】:

                      【解决方案21】:

                      以防万一,恕我直言,使用 CSS 的最佳解决方案是使用 flexbox。

                      这是一个例子:

                      .kw-dvp-HorizonalButton {
                          color: #0078d7;
                          display:flex;
                          flex-wrap:nowrap;
                          align-items:center;
                      }
                      .kw-dvp-HorizonalButton:before, .kw-dvp-HorizonalButton:after {
                          background-color: #0078d7;
                          content: "";
                          display: inline-block;
                          float:left;
                          height:1px;
                      }
                      .kw-dvp-HorizonalButton:before {
                          order:1;
                          flex-grow:1;
                          margin-right:8px;
                      }
                      .kw-dvp-HorizonalButton:after {
                          order: 3;
                          flex-grow: 1;
                          margin-left: 8px;
                      }
                      .kw-dvp-HorizonalButton * {
                          order: 2;
                      }
                          <div class="kw-dvp-HorizonalButton">
                              <span>hello</span>
                          </div>

                      这应该始终产生完美居中对齐的内容,左右两边各有一条线,并且该线与您的内容之间的边距易于控制。

                      它在顶部控件之前和之后创建一个 line 元素,并将它们设置为 flex 容器中的 order 1,3,同时将你的内容设置为 order 2(进入中间)。 给 before/after 增加 1 将使它们平均占用最空闲的空间,同时保持您的内容居中。

                      希望这会有所帮助!

                      【讨论】:

                        【解决方案22】:

                        拯救 CSS 网格

                        类似于上面的flex 答案,这也可以使用CSS Grids 来完成。这为您提供了更大的偏移标题的空间,以及一种更简单的方法来扩大行(使用grid-template-columns)和内容(使用grid-gap)之间的差距。

                        这种方法相对于 flex 方法的好处是可以很容易地偏移线,另外只需要在列之间添加一次间隙(不是两次,对于每个 :before:after 伪元素)。它在语法上也更加清晰和明显的 IMO。

                        h1 {
                          display: grid;
                          grid-template-columns: 1fr auto 1fr;
                          align-items: center;
                          grid-gap: 1rem;
                        }
                        
                        h1:before,
                        h1:after {
                          content: "";
                          display: block;
                          border-top: 2px solid currentColor;
                        }
                        
                        h1.offset {
                          grid-template-columns: 1fr auto 3fr;
                        }
                        
                        h1.biggap {
                          grid-gap: 4rem;
                        }
                        <h1>This is a title</h1>
                        
                        <h1 class="offset">Offset title</h1>
                        
                        <h1 class="biggap">Gappy title</h1>
                        
                        <h1>
                          <span>Multi-line<br />title</span>
                        </h1>

                        【讨论】:

                          【解决方案23】:

                          此代码将正常工作:

                          /* پخش زنده*/
                            .div-live {
                              text-align: center;
                          }
                          .span-live {
                              display: inline-block;
                              color: #b5b5b5;
                            
                          }
                          .span-live:before,
                          .span-live:after {
                              border-top: 1px solid #b5b5b5;
                              display: block;
                              height: 1px;
                              content: " ";
                              width: 30%;
                              position: absolute;
                              left: 0;
                              top: 3rem;
                          
                          
                          }
                          .span-live:after {
                             right: 0;
                             left: auto;
                          }
                            <div class="div-live">
                                      <span class="span-live">پخش زنده</span>
                          
                              </div>

                          【讨论】:

                            【解决方案24】:

                            没有伪元素,没有附加元素。只有单个 div:

                            我使用了一些 CSS 变量来轻松控制。

                            div {
                              --border-height: 2px;
                              --border-color: #000;
                              background: linear-gradient(var(--border-color),var(--border-color)) 0% 50%/ calc(50% - (var(--space) / 2)) var(--border-height),
                                          linear-gradient(var(--border-color),var(--border-color)) 100% 50%/ calc(50% - (var(--space) / 2)) var(--border-height);
                              background-repeat:no-repeat;
                              text-align:center;
                            }
                            <div style="--space: 100px">Title</div>
                            <div style="--space: 50px;--border-color: red;--border-height:1px;">Title</div>
                            <div style="--space: 150px;--border-color: green;">Longer Text</div>

                            但上述方法不是动态的。您必须根据文本长度更改--space 变量。

                            【讨论】:

                              【解决方案25】:

                              我选择了一种更简单的方法:

                              HTML

                              <div class="box">
                                <h1 class="text">OK THEN LETS GO</h1>
                                <hr class="line" />
                              </div>
                              

                              CSS

                              .box {
                                align-items: center;
                                background: #ff7777;
                                display: flex;
                                height: 100vh;
                                justify-content: center;
                              }
                              
                              .line {
                                border: 5px solid white;
                                display: block;
                                width: 100vw;
                              }
                              
                              .text {
                                background: #ff7777;
                                color: white;
                                font-family: sans-serif;
                                font-size: 2.5rem;
                                padding: 25px 50px;
                                position: absolute;
                              }
                              

                              结果

                              【讨论】:

                                【解决方案26】:

                                如果您将 React 与样式化组件一起使用。我发现分离元素更容易。不是“惊人的解决方案”,但它确实有效。

                                import React from 'react';
                                import styled from "@emotion/styled";
                                
                                const Container = styled.div`
                                  padding-top: 210px;
                                  padding-left: 50px;  
                                  display: inline-flex;
                                `
                                
                                const Title1 = styled.div`
                                  position: absolute;
                                  font-size: 25px;
                                  left:40px;
                                  color: white;
                                  margin-top: -17px;
                                  padding-left: 40px;
                                `
                                
                                const Title2 = styled.div`
                                  position: absolute;
                                  font-size: 25px;
                                  left:1090px;
                                  color: white;
                                  margin-top: -17px;
                                  padding-left: 40px;
                                `
                                
                                const Line1 = styled.div`
                                  width: 20px;
                                  border: solid darkgray 1px;
                                  margin-right: 90px;
                                `
                                const Line2 = styled.div`
                                  width: 810px;
                                  border: solid darkgray 1px;
                                  margin-right: 126px;
                                `
                                const Line3 = styled.div`
                                  width: 178px;
                                  border: solid darkgray 1px;
                                `
                                
                                
                                const Titulos = () => {
                                    return (
                                        <Container>
                                            <Line1/>
                                            <Title1>
                                                FEATURED
                                            </Title1>
                                            <Line2/>
                                            <Line1/>
                                            <Title2>
                                                EXCLUSIVE
                                            </Title2>
                                            <Line3/>
                                        </Container>
                                    );
                                };
                                
                                export default Titulos;
                                

                                结果:

                                【讨论】:

                                  【解决方案27】:

                                  这可能超出了这个问题,但我相信这确实可以帮助其他有类似问题的人。

                                  如果您需要多个单元格并且不想明确指定背景颜色,则必须对行的每个部分使用标记。

                                  这允许您使用完整的 flex line 将元素定位在任何位置,并且对于例如扩展器

                                  .title-hr {
                                    width: 100%;
                                    vertical-align: middle;
                                    align-items: center;
                                    text-align: start;
                                    display: flex;
                                  }
                                  
                                  .title-hr>span {
                                    padding: 0 0.4em;
                                  }
                                    
                                  .title-hr>.hr {
                                    border-bottom: 1px solid #777;
                                    line-height: 0.1em;
                                    margin: 0.34em 0 0.35em;
                                    flex: 1 1 auto;
                                  }
                                  
                                  .title-hr>.hr.fix {
                                    flex: 0 1 auto;
                                  }
                                  <div class="title-hr">
                                    <span>+</span>
                                    <span class="hr fix"></span>
                                    <span>Title</span>
                                    <span class="hr"></span>
                                  </div>

                                  【讨论】:

                                    【解决方案28】:
                                       <div class="flex items-center">
                                          <div class="flex-grow bg bg-gray-300 h-0.5"></div>
                                          <div class="flex-grow-0 mx-5 text dark:text-white">or</div>
                                          <div class="flex-grow bg bg-gray-300 h-0.5"></div>
                                       </div>
                                    

                                    对于所有顺风爱好者。 灵感来自 WellSpring 的回答

                                    【讨论】:

                                    • 爱你!非常感谢!
                                    【解决方案29】:

                                    具有透明度的元素动态解决方案:

                                    h2 {
                                      display:table; /* fit content width*/
                                      margin:20px auto; /* center*/
                                      padding:0 10px; /* control the space between the text and the line */
                                      box-shadow:0 0 0 100px red; /* control the line length and color here */
                                      --s:2px; /* control the line thickness*/
                                      clip-path:
                                        polygon(0 0,100% 0,
                                            99%     calc(50% - var(--s)/2),
                                            200vmax calc(50% - var(--s)/2), 
                                            200vmax calc(50% + var(--s)/2),
                                            99%     calc(50% + var(--s)/2),
                                          100% 100%,0 100%,
                                            1px     calc(50% + var(--s)/2),
                                           -200vmax calc(50% + var(--s)/2),
                                           -200vmax calc(50% - var(--s)/2),
                                            1px     calc(50% - var(--s)/2));
                                    }
                                    
                                    body {
                                      background: pink;
                                    }
                                    <h2>a Title here </h2>
                                    <h2 style="box-shadow:0 0 0 100vmax blue;">Title</h2>
                                    <h2 style="box-shadow:0 0 0 200px green;--s:5px">Another title Title</h2>

                                    【讨论】:

                                      【解决方案30】:

                                      使用官方position utilities 没有自定义 CSS 的纯 Bootstrap 5 解决方案:

                                      <div class="position-relative my-4">
                                        <hr />
                                        <small class="position-absolute top-50 start-50 translate-middle bg-white px-3 text-muted">
                                          my title here
                                        </small>
                                      </div>
                                      

                                      记住要根据父DOM元素的背景颜色调整CSS类bg-white

                                      【讨论】:

                                        猜你喜欢
                                        • 1970-01-01
                                        • 2015-08-07
                                        • 2016-10-25
                                        • 1970-01-01
                                        • 1970-01-01
                                        • 2014-02-05
                                        • 2011-05-26
                                        相关资源
                                        最近更新 更多