下面是我对Bootstrap 5的简单解决方案，只使用预定义的类:

<div class="py-3 d-flex align-items-center">
    <hr class="flex-grow-1" />
    <div class="badge bg-secondary">OR</div>
    <hr class="flex-grow-1" />
</div>

结果:

你可以将它作为React组件重用，例如:

export default function Divider({ text }) {
    return <div className="py-3 d-flex align-items-center">
        <hr className="flex-grow-1" />
        <div className="badge bg-secondary">{ text }</div>
        <hr className="flex-grow-1" />
    </div>;
}

这段代码将正常工作:

/* پخش زنده*/ .div-live { text-align:中心; ｝ .span-live { 显示:inline-block; 颜色:# b5b5b5; ｝ .span-live:之前, .span-live:{后 Border-top: 1px solid #b5b5b5; 显示:块; 身高:1 px; 内容:“”; 宽度:30%; 位置:绝对的; 左:0; 上图:3快速眼动; ｝ .span-live:{后 右:0; 左:汽车; ｝ < div class = " div-live”> <span class="span-live">پخش زنده</span> < / div >

.hr-sect { 显示:flex; flex-basis: 100%; 对齐项目:中心; 颜色:rgba(0,0,0,0.35); Margin: 8px 0px; ｝ .hr-sect::, {后.hr-sect:: 内容:“”; flex-grow: 1; 背景:rgba(0,0,0,0.35); 身高:1 px; 字体大小:0 px; 行高:0 px; Margin: 0px 8px; ｝ < div class = " hr-sect " > < / div >文本

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;
        }

这对你有帮助

我使用一个表格布局来动态填充边和0高度，绝对位置div动态垂直定位:

没有硬编码的维度 没有图像 没有它 方面的背景 控制条外观

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

我发现，稍微低于真中心的文字效果最好;这可以在55%的位置进行调整(身高越高，界限越低)。线条的外观可以改变边界底部的位置。

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;
}

IE8及更新版本的解决方案…

值得注意的问题:

使用背景颜色来掩盖边框可能不是最好的解决方案。如果你有一个复杂的(或未知的)背景颜色(或图像)，掩蔽最终将失败。此外，如果你调整文本大小，你会注意到白色背景色(或任何你设置的颜色)会开始覆盖上面(或下面)的文本。

您也不希望“猜测”各个部分的宽度，因为这会使样式非常不灵活，几乎不可能在内容宽度不断变化的响应式站点上实现。

解决方案:

(View JSFiddle)

使用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; }

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

限制:

没有多行文本。只能单行。 HTML标记不那么优雅 line元素上的Top属性需要是行高的一半。所以，如果行高是1.5em，那么顶部应该是- 0.75 em。这是一个限制，因为它不是自动的，如果您在具有不同行高的元素上应用这些样式，那么您可能需要重新应用您的行高样式。

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