小开

<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设置padding，使文本和行之间有更多的空间。

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

小开

我不太确定，但您可以尝试使用水平规则，并将文本推到其上边距之上。你还需要一个固定宽度的段落标签和背景。这有点粗糙，我不知道它是否适用于所有浏览器，你需要根据字体大小设置负边距。虽然chrome的工作。

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


<hr><p>def</p>

小开

最佳答案

这大致是我的做法:通过在包含h2的border-bottom上设置一个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/

小开

好吧，这个要复杂一些，但它在ie8中是适用的

<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/

小开

在尝试了不同的解决方案后，我有一个有效的不同的文本宽度，任何可能的背景，没有添加额外的标记。

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/

小开

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

值得注意的问题:

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

你也不想“估计”节有多宽，因为它使样式非常不灵活，几乎不可能实现在一个响应式网站，内容的宽度是不断变化的。

解决方案:

(查看JSFiddle)

不要用background-color来“掩盖”边界，而是使用你的display属性。

超文本标记语言

<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属性需要是line-height的一半。因此，如果你有1.5em的line-height，那么top应该是-.75em。这是一个限制，因为它不是自动的，如果你在不同行高的元素上应用这些样式，那么你可能需要重新应用你的line-height样式。

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

小开

最短最佳方法:

span:after,
span:before{
content:"\00a0\00a0\00a0\00a0\00a0";
text-decoration:line-through;
}

<span> your text </span>

小开

我一直在寻找这个简单的装饰的一些解决方案，我发现了相当多的，一些奇怪的，一些甚至用JS来计算字体的高度和bla,bla,bla，然后我读了这篇文章，读了来自thirtydot的评论，谈到fieldset和legend，我认为这就是它。

我重写了这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;
}

小开

编辑(09/2020)

display:flex方法似乎是当今最可靠和最容易设置的方法。

写于3月17 '15 17:06:

对于稍后(现在)的浏览器，display:flex和pseudo-elements使得无需额外标记即可轻松绘制。

border-style， box-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 */
}

<h1>side lines via flex</h1>

ressource (added 09/2020):

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (see flex/flex-grow used here)
https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/ (margin:auto 0.25em; used here )

小开

如果有人想知道如何设置标题，使其显示在左侧的固定距离(而不是如上所示的居中)，我通过修改@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。

小开

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

这对你有帮助

< br >之间的线

小开

我使用一个表格布局来动态填充边和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;
}

小开

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

超文本标记语言

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

< p >结果: https://jsfiddle.net/fasilkk/vowqfnb9/ < / p >

小开

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

<div class="hr-sect">Text</div>

小开

这为你提供了固定长度的行，但工作得很好。行长可以通过添加或取'\00a0' (unicode空格)来控制

h1:before, h1:after {
content:'\00a0\00a0\00a0\00a0';
text-decoration: line-through;
margin: auto 0.5em;
}

<h1>side lines</h1>

小开

这是一个基于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
}

<h1>Today</h1>

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

小开

不是白费口舌，但我一直在寻找一个解决方案，最终来到这里，我自己对这些选项不满意，尤其是由于某种原因，我无法得到这里提供的解决方案。(可能是我的失误造成的…)但我一直在玩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/ < / p >

小开

对我来说，这个解决方案非常有效……

超文本标记语言

<h2 class="strikethough"><span>Testing Text</span></h2>

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

小开

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

小开

水平和垂直行，中间有单词

.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中得到了回答

小开

以防有人想这样做，依我看，使用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>

这应该总是会产生一个完美的居中对齐的内容，左边和右边有一条线，线和内容之间有一个容易控制的边缘。

它在顶部控件之前和之后创建一个线元素，并在flex容器中将它们设置为顺序1,3，同时将内容设置为顺序2(进入中间)。给前后增加1将使他们平等地消耗最多的空白空间，同时保持你的内容的中心

希望这能有所帮助!

小开

CSS网格是救星

类似于上面的flex答案，这也可以使用CSS网格来完成。这为你提供了更多的范围来偏移标题，以及一种更简单的方式来扩大行(使用grid-template-columns)和内容(使用grid-gap)之间的间隙。

与flex方法相比，此方法的优点是易于偏移行，并且只需要在列之间添加一次间隙(而不是两次，对于每个:before和:after伪元素)。在我看来，它在语法上也更清晰和明显。

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>

小开

这段代码将正常工作:

/* پخش زنده*/
.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>

小开

没有伪元素，没有附加元素。只有一个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变量。

小开

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

超文本标记语言

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

结果

小开

如果你正在使用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;

结果:

小开

这可能有点超出了问题的范围，但我相信这确实有助于其他有类似问题的人。

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

这允许你使用一个完整的伸缩线来定位元素，例如扩展器

.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>

小开

   <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的回答

.

小开

透明的单元素动态解决方案:

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>

小开

使用Flexbox的简单方法

#title-wrapper{
display:flex;
align-items:center;
}
.title{
flex-wrap:wrap;
margin: 0 10px 0 10px;
text-align:center;
}
.line{
flex:1;
height:1px;
background-color: black;
}

<section id='title-wrapper'>
<div class='line'></div>
<div class='title'>some text</div>
<div class='line'></div>
</section>

小开

下面是我对引导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>;
}

小开

我认为最直接的方法是使用CSS网格。

h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1rem;
}


h1::before,
h1::after {
content: "";
border-top: 0.1rem double black;
align-self: center;
}

<h1>Heading<h2>

小开

这里有一个解决方案，只需要2个属性，很容易更新使用CSS变量:

h2 {
--s: 3px;   /* the thickness */
--c: red;   /* the color */
--w: 100px; /* the width */
--g: 10px;  /* the gap */
border: 1px solid;
border-image:
linear-gradient(
#0000      calc(50% - var(--s)/2),
var(--c) 0 calc(50% + var(--s)/2),
#0000    0)
0 1/0 var(--w)/0 calc(var(--w) + var(--g));
}


h2 {
font-size: 2rem;
margin: 20px auto;
width: fit-content;
}
body {
font-family: system-ui, sans-serif;
}

<h2>I am a Title</h2>
<h2 style="--g:50px;--c:purple">Adding some gap </h2>
<h2 style="--w:100vw;--c:blue;--s:7px">Title</h2>
<h2 style="--c:green;--s:5px;--w:50px;--g:20px">Another Title</h2>

小开

使用Bootstrap 4预定义类

<div class="row align-items-center">
<div class="col dropdown-divider"></div>
<div class="col-auto">OR</div>
<div class="col dropdown-divider"></div>
</div>

CSS技术的一个水平线与文字在中间

编辑(09/2020)

CSS网格是救星

使用Bootstrap 4预定义类