问：

2年前关闭。

我想知道在 xhtml 1.0 strict 中有哪些选项可以在文本的两侧创建一行，如下所示：

Section one
----------------------- Next section -----------------------
Section two

我想过做一些像这样花哨的事情：

<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section

或者，因为上面的对齐方式（垂直和水平）有问题：

<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>

这也存在对齐问题，我用这个混乱解决了这个问题：

<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></table>

除了对齐问题之外，这两种选择都感觉“笨拙”，如果您碰巧以前见过这个并且知道一个优雅的解决方案，我将非常有义务。

HTML CSS XHTML 行垂直对齐

3赞 willoller 9/29/2012

这是另一个没有额外标签挑战的线程 - 以及解决方案！stackoverflow.com/questions/12648513/......

1赞 11/19/2015

stackoverflow.com/questions/5214127/......仍然是最好的解决方案。

0赞 Brian M. Hunt 10/13/2017

这里一个有用的答案是使用 CSS Grid。

0赞 tao 1/12/2019

添加了一个答案（SCSS），它几乎可以将任何元素转换为没有设置背景的分隔线，并允许设置：分隔线的颜色和笔触样式（纯色、虚线、虚线）、文本的位置（左、右、居中）以及应用它的类（默认）。.divider

0赞 MatTheCat 10/31/2019

鉴于当前的 flexbox 支持，我认为我的答案可能会获得一些可见性。

答：

9赞 willoller 5/12/2010 #1

更新：这在使用 HTML5 时不起作用

相反，请查看这个问题以获取更多技术：CSS 挑战，我可以在不引入更多 HTML 的情况下做到这一点吗？

我曾经在我的网站标题中创建效果 guerilla-alumnus.comline-height:0

<div class="description">
   <span>Text</span>
</div>

.description {
   border-top:1px dotted #AAAAAA;
}

.description span {
   background:white none repeat scroll 0 0;
   line-height:0;
   padding:0.1em 1.5em;
   position:relative;
}

另一个好方法是 http://robots.thoughtbot.com/

他使用背景图像和漂浮来达到很酷的效果

1赞 Brian M. Hunt 5/12/2010

我喜欢这个，它在你的网站上看起来很棒，但我无法让它工作（我怀疑来自 jQuery css 的干扰）。:(但它真的很酷。

0赞 imns 5/18/2012

我认为你的 h1 正在向下推跨度。

1赞 Peter 1/5/2013

这是一个“hack”，它采用了 DOCTYPE XTHML 1.0 Transition 的不同渲染行为。如果您使用 DOCTYPE html（用于 HTML5），它将不起作用。

55赞 Diodeus - James MacFarlane 5/12/2010 #2

试试这个：

.divider {
	width:500px;
	text-align:center;
}

.divider hr {
	margin-left:auto;
	margin-right:auto;
	width:40%;

}

.left {
	float:left;
}

.right {
	float:right;
}

<div class="divider">
    <hr class="left"/>TEXT<hr class="right" />
</div>

在 jsFiddle 上进行实时预览。

4赞 Kirby 11/6/2011

它运行良好并使用 <hr /> 那么这个答案可能有什么问题呢？我什么也没说。

4赞 Kelvin 2/1/2013

+1 无需弄乱背景颜色或以意想不到的方式使用标签。一个缺点是宽度取决于文本的长度。建议：宽度应以单位指定。要获得宽度，请使用（ width 减去 # 个字符） / 2 。.divider hr.divider.divider hremhr.divider

1赞 TomSawyer 2/10/2020

40%在这里是错误的。如果文本较长，则会错位

0赞 user151323 5/12/2010 #3

您可以在没有 .从语义上讲，设计应该用CSS的方式完成，在这种情况下，这是很有可能的。<hr />

div.header
{
  position: relative;
  text-align: center;
  padding: 0 10px;
  background: #ffffff;
}

div.line
{
  position: absolute;
  top: 50%;
  border-top: 1px dashed;
  z-index: -1;
}

<div class="header">
  Next section
  <div class="line">&nbsp;</div>
</div>

2赞 dclowd9901 5/12/2010 #4

您可以尝试执行，并将“图例”元素（您的“下一节”文本）对齐到字段的中间，仅设置。我不确定图例是如何根据字段集元素定位的。不过，我想这可能只是一个简单的伎俩。fieldsetborder-topmargin: 0px auto

例：

<fieldset>
      <legend>Title</legend>
</fieldset>

6赞 Trey Hunner 5/12/2010 #5

如果您可以使用 CSS 并且愿意使用已弃用的属性，则样式化的字段集/图例将起作用：align

<style type="text/css">
fieldset { 
    border-width: 1px 0 0 0;
}
</style>

<fieldset>
<legend align="center">First Section</legend>
Section 1 Stuff
</fieldset>

<fieldset>
<legend align="center">Second Section</legend>
Section 2 Stuff
</fieldset>

字段集的预期用途是以逻辑方式对表单字段进行分组。正如 willoler 所指出的，样式不适用于元素。是已弃用的 HTML，但它应该在所有浏览器中将文本正确居中。text-align: centerlegendalign="center"

0赞 dclowd9901 5/12/2010

更详细地解释我想要什么。

0赞 dclowd9901 5/12/2010

我很确定具有 or 元素的显示特征，因为它可以填充和边距，这意味着不应该起作用......<legend>blockinline-blocktext-align:center

0赞 willoller 5/12/2010

是的，图例非常适合语义 - 我用它们来包装无线电组，但它们是出了名的固执

0赞 Trey Hunner 5/12/2010

我纠正了我的答案。不幸的是，由于某些浏览器在设置元素样式时的顽固性，这是我能找到的唯一可靠地将 .legendalign="center"legend

243赞 Fletcher Moore 5/12/2010 #6

怎么样：

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: #F3F5F6; padding: 0 10px;">
    Section Title <!--Padding is optional-->
  </span>
</div>

看看这个JSFiddle。

您可以使用 vw 或 % 来使其响应。

2赞 Mitar 12/5/2011

获得确切的最高值有点困难。它不完全是-0.5em;

0赞 JimXC 11/25/2013

完善。“反应灵敏”也是

4赞 MartinF 4/28/2014

请参阅我的答案，了解不需要您指定背景颜色或宽度的解决方案。

0赞 tao 2/13/2019

请参阅我的答案，了解响应式、透明的 bg、分隔线的可变样式和高度、文本的可变位置。也可以使用 SCSS 多次应用于不同的选择器，以便在同一项目中具有多种样式的分隔器。适用于任何 .font-size

3赞 Dänu 5/12/2010 #7

<fieldset style="border:0px; border-top:1px solid black">
    <legend>Test</legend>
</fieldset>

邪恶的黑客......

1赞 Nick Larsen 5/12/2010

我不会称它为黑客，但我会测试它是否适用于您打算支持的所有浏览器。

0赞 Dänu 5/31/2010

Fieldset 不想这样使用，它已经被黑客入侵了;-）

7赞 Aleksejs Mjaliks 5/12/2010 #8

<div style="text-align: center; border-top: 1px solid black">
  <div style="display: inline-block; position: relative; top: -10px; background-color: white; padding: 0px 10px">text</div>
</div>

2赞 Jacob Block 5/18/2011 #9

呜，我的第一篇文章，尽管这是一年前的事了。为了避免包装器的背景着色问题，您可以将 inline-block 与 hr 一起使用（没有人明确说过）。Text-align 应正确居中，因为它们是内联元素。

<div style="text-align:center">
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
       &nbsp;New Section&nbsp;
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
</div>

2赞 Youri 9/18/2012 #10

我使用中间有一个跨度。h1

HTML 示例：

<h1><span>Test archief</span></h1>

CSS 示例：

.archive h1 {border-top:3px dotted #AAAAAA;}
.archive h1 span { display:block; background:#fff; width:200px; margin:-23px auto; text-align:center }

就这么简单。

0赞 Nix 9/18/2012

欢迎来到 StackOverflow，Youri。您可以考虑使用 .它具有相同的目的，只是它自然是一个块元素。:)spandiv

0赞 Jonathan 1/18/2013

@Nix 内联元素中的块元素？不用了，谢谢，span 是个不错的选择

1赞 Nix 1/18/2013

@MrAzulay 是一个内联元素。非常适合包装东西，但在这种情况下我更喜欢 a 的原因是因为 Youri 使用 CSS 将设置为 .我看不出将内联元素变成块元素的意义，当有合适的块元素（）随时可用时。h1spandivspandisplay:block;div

0赞 Jonathan 1/18/2013

@Nix 这不是很常见的事情吗？虽然将块放在内联内部是不好的做法 imo。这是一篇关于它的好帖子 skypoetsworld.blogspot.se/2008/10/......

0赞 Nix 1/18/2013

哎呀，我在最新的评论中打错了。我同意你不应该在内联元素中放置一个块，而实际上是一个 BLOCK 元素。很抱歉造成混乱。不过，我看不出将 a 变成块元素的意义，但足够公平。h1span

3赞 Lazar Vuckovic 9/18/2012 #11

增加了一个 2 年前的帖子，但这是我如何仅使用一个元素和 CSS 处理这些情况。

h1 {
    text-align: center;
}

h1:before,
h1:after {
    content: "";
    background: url('http://heritageonfifth.com/images/seperator.png') left center repeat-x;
    width: 15%;
    height: 30px;
    display: inline-block;
    margin: 0 15px 0 0;
}

h1:after{
    background-position: right center;
    margin: 0 0 0 15px;
}

这里有一个小提琴来检查一下：http://jsfiddle.net/sRhBc/（谷歌为边境拍摄的随机图像）。

这种方法的唯一缺点是它不支持 IE7。

24赞 Robert Kajic 9/21/2012 #12

我刚刚遇到了同样的问题，这里有一种方法可以解决它：

<table width="100%">
  <tr>
    <td><hr /></td>
    <td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
    <td><hr /></td>
  </tr>
</table>

它无需在文本元素上设置背景即可工作，即无论它后面的背景是什么，它看起来都不错。

你可以在这里试试：http://jsfiddle.net/88vgS/

0赞 Dracorat 6/22/2013

不能解决 OP 的问题。这将创建两行，它们之间带有文本。他想要一条中途断开的行，并且在断开的部分有文本，然后该行继续。

2赞 Robert Kajic 6/24/2013

它实际上做到了 OP 所要求的。您可以在 jsfiddle.net/88vgS 中看到它

0赞 Robert Kajic 6/24/2013

另外，如果不是两行中间有文本，那么中途断行，在断点部分有文本，什么是断行？

0赞 Dracorat 6/24/2013

您应该在那里抛出适当的 TR 标签。我想这就是让我感到困惑的原因。出于某种原因，我最初以为它是在三行上，而不是三列。正确的标记可能不会让我这样看待它。无论如何，这绝对是一个可行的解决方案。

1赞 Nicholas Petersen 10/9/2013

但这使用表格，这是不允许的！哦，开个玩笑。GRIDS有其一席之地，几乎所有其他GUI XML框架都认识到这一点，并在任何地方使用它们（例如WPF / XAML）。谢谢你的解决方案伙伴！这值得超过 3 票。不过，我怀疑人们对讨厌的桌子的厌恶将是一个障碍。

1赞 Chet at C2IT 11/22/2012 #13

总有老式的 FIELDSET

 fieldset
 {
border-left: none;
border-right: none;
border-bottom: none;
 }
 fieldset legend
 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
 }

0赞 tehlivi 6/17/2014

字段集只能与表单一起使用。

2赞 user2673353 8/12/2013 #14

查看上面的内容，我修改为：

CSS的

.divider {
    font: 33px sans-serif;
    margin-top: 30px;
    text-align:center;
    text-transform: uppercase;
}
.divider span {
    position:relative;
}
.divider span:before, .divider span:after {
    border-top: 2px solid #000;
    content:"";
    position: absolute;
    top: 15px;
    right: 10em;
    bottom: 0;
    width: 80%;
}
.divider span:after {
    position: absolute;
    top: 15px;
    left:10em;
    right:0;
    bottom: 0;
}

[HTML全文]

<div class="divider">
    <span>This is your title</span></div>

似乎工作正常。

2赞 Nicholas Petersen 10/9/2013 #15

采用@kajic的解决方案，并将样式放入CSS中：

<table class="tablehr">
  <td><hr /></td>
  <td>Text!</td>
  <td><hr /></td>
</table>

然后是 CSS（但它依赖于 CSS3 使用第 n 个选择器）：

.tablehr { width:100%; }
.tablehr > tbody > tr > td:nth-child(2) { width:1px; padding: 0 10px; white-space: nowrap; }

干杯。

（附言在 tbody 和 tr 上，Chrome、IE 和 Firefox 至少会自动插入 tbody 和 tr，这就是为什么我的示例和 @kajic 的示例一样，没有包含这些内容，以便在所需的 html 标记中保持更短。截至 2013 年，此解决方案已使用最新版本的 IE、Chrome 和 Firefox 进行了测试。

2赞 vsync 11/10/2013 #16

演示页面

[HTML全文]

<header>
  <h1 contenteditable>Write something</h1>
</header>

CSS的

header{ 
  display:table;
  text-align:center; 
}
header:before, header:after{ 
  content:'';
  display:table-cell; 
  background:#000; 
  width:50%;
  -webkit-transform:scaleY(0.3);
  transform:scaleY(0.3);
}
header > h1{ white-space:pre; padding:0 15px; }

205赞 MartinF 3/24/2014 #17

在不知道宽度和背景颜色的情况下解决此问题的方法如下：

结构

<div class="strike">
   <span>Kringle</span>
</div>

CSS的

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: red;
}

.strike > span:before {
    right: 100%;
    margin-right: 15px;
}

.strike > span:after {
    left: 100%;
    margin-left: 15px;
}

示例：http://jsfiddle.net/z8Hnz/

双线

若要创建双线，请使用以下选项之一：

1）行间距固定

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    border-top: 4px double red;

示例：http://jsfiddle.net/z8Hnz/103/

2）行间自定义空格

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 5px; /* space between lines */
    margin-top: -2px; /* adjust vertical align */
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

示例：http://jsfiddle.net/z8Hnz/105/

SASS （SCSS）版本

基于这个解决方案，我添加了 SCSS“具有颜色属性”，如果它可以帮助某人......

//mixins.scss
@mixin bg-strike($color) {

    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 

    > span {

        position: relative;
        display: inline-block;

        &:before,
        &:after {
            content: "";
            position: absolute;
            top: 50%;
            width: 9999px;
            height: 1px;
            background: $color;
        }

        &:before {
            right: 100%;
            margin-right: 15px;
        }

        &:after {
            left: 100%;
            margin-left: 15px;
        }
    }
}

使用示例：

//content.scss
h2 {
    @include bg-strike($col1);
    color: $col1;
}

0赞 tehlivi 6/17/2014

如果您为线条使用图像，则此版本效果更好 - 或者至少它更容易编辑并保持响应

0赞 wloescher 9/5/2014

非常好的工作！你能用你的魔法来创造一条双线吗？（否则，我只能使用一个微小的重复背景图像。

2赞 Dinesh Dabhi 12/18/2015

这是最好的答案，因为它可以在不设置背景的情况下工作，并且当您必须设置透明背景时

0赞 alaster 1/23/2017

很好的例子。您还可以将文本向左、居中和向右对齐，它按预期工作 - 不需要的行将消失。但是您需要将其删除才能正常工作text-align: center;

0赞 Diosney 8/20/2018

要隐藏两侧的溢出线，只需设置为父线，瞧，受约束的删除线。overflow: hidden

2赞 user3898371 8/1/2014 #18

这对我有用，不需要文本后面的背景颜色来隐藏边框线，而是使用实际的 hr 标签。您可以调整宽度以获得不同大小的 hr 线。

<div>
    <div style="display:inline-block;width:45%"><hr width='80%' /></div>
    <div style="display:inline-block;width: 9%;text-align: center;vertical-align:90%;text-height: 24px"><h4>OR</h4></div>
    <div style="display:inline-block;width:45%;float:right" ><hr width='80%'/></div>
</div>

2赞 Anit Garg 8/7/2014 #19

使用方便

    hr
    {
        padding: 0;
        border: none;
        border-top: 1px solid #CCC;
        color: #333;
        text-align: center;
        font-size: 12px;
        vertical-align:middle;
    }
    hr:after
    {
        content: "Or";
        display: inline-block;
        position: relative;
        top: -0.7em;
        font-size: 1.2em;
        padding: 0 0.25em;
        background: white;
    }

235赞 MatTheCat 10/29/2014 #20

Flexbox 是解决方案：

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

<div class="separator">Next section</div>

如今，每个浏览器都支持它，如果需要，您可以通过添加相应的供应商前缀来确保与十年前的浏览器兼容。无论如何，它都会优雅地降解。

1赞 akivajgordon 1/4/2018

如今考虑 flexbox 支持的最佳答案

0赞 Smaillns 6/3/2020

这是一个很好的解决方案

3赞 Erdem Ergin 1/7/2021

我相信放置一个跨度并为其提供边距而不是伪类是为文本提供边距的更灵活的解决方案。这样，它可以用作带或不带文本的单个分隔符组件。<div class="separator"><span>Next section</span></div> .separator span { margin-left: .25em; margin-right: .25em; }

2赞 MatTheCat 2/11/2021

@ErdemErgin我编辑了我的答案以解决您的用例。

0赞 sohammondal 5/31/2022

完美的解决方案！

6赞 sidonaldson 2/12/2015 #21

您可以只使用相对位置并在父项上设置高度

.fake-legend {
  height: 15px;
  width:100%;
  border-bottom: solid 2px #000;
  text-align: center;
  margin: 2em 0;
}
.fake-legend span {
  background: #fff;
  position: relative;
  top: 0;
  padding: 0 20px;
  line-height:30px;
}

<p class="fake-legend"><span>Or</span>
</p>

108赞 Omniscience 3/23/2016 #22

您可以使用：before 和：after 来实现此目的，而无需知道容器的宽度或背景颜色，并且使用它们可以更好地设置换行符的样式。例如，可以将其修改为双线、虚线等。

JSFiddle

CSS 和 HTML 用法：

.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">CATEGORY</div>

SCSS 版本：

.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
    margin: 8px 0;

    &:before, &:after {
        content: "";
        flex-grow: 1;
        background: rgba(0, 0, 0, 0.35);
        height: 1px;
        font-size: 0;
        line-height: 0;
        margin: 0 8px;
    }
}

1赞 Farside 4/4/2016

优雅的解决方案，尽管它有一个警告：如果没有文本，你仍然会在行之间留有间隙。

17赞 Robert 7/29/2016

老实说，这是此线程中最干净的解决方案，可以忽略没有文本的问题，因为您总是希望带有文本的分隔线。

1赞 Christos Lytras 12/23/2021

更改 with 以控制线条样式。background: rgba(0, 0, 0, 0.35);border-top: 1px dashed rgba(0, 0, 0, 0.35);

0赞 Betty Lee 12/2/2016 #23

CSS的

.Divider {
width: 100%; height: 30px;  text-align: center;display: flex;
}
.Side{
width: 46.665%;padding: 30px 0;
}
.Middle{
width: 6.67%;padding: 20px 0;
}

[HTML全文]

<div class="Divider">
    <div class="Side"><hr></div>
    <div class="Middle"><span>OR</span></div>
    <div class="Side"><hr></div>
</div>

您可以根据标签“span”中文本的长度修改“side”和“middle”类中的宽度。确保“中间”的宽度加上“边”宽度的 2 倍等于 100%。

7赞 Sandeep Gupta 8/12/2017 #24

Bootstrap 网格：

HTML格式：

  <div class="row vertical-center">
    <div class="col-xs-5"><hr></div>
    <div class="col-xs-2" style="color: white"> Text</div>
    <div class="col-xs-5"><hr></div>
  </div>

CSS：

.vertical-center{
  display: flex;
  align-items: center;
}

1赞 Cameron Hudson 9/3/2019

该类在引导程序（4.3.1）中不再存在。你能更新你的答案吗？vertical-centeralign-items-center

2赞 Jade 9/15/2017 #25

我制作了一把使用 FlexBox 的小提琴，还会给你不同风格的 HR（双线、线中心的符号、阴影、插图、插图、虚线等）。

CSS的

button {
    padding: 8px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #ccc;
    margin: 2px;
  }

  button:hover {
    cursor: pointer;
  }

  button.active {
    background-color: rgb(34, 179, 247);
    color: #fff;
  }

  .codeBlock {
    display: none;
  }

  .htmlCode, .cssCode {
    background-color: rgba(34, 179, 247, 0.5); 
    width: 100%;
    padding: 10px;
  }

  .divider {
    display: flex;
    flex-direction: row;
    flex-flow: row;
    width: 100%;
  }

  .divider.fixed {
    width: 400px;
  }

  .divider > label {
    align-self: baseline;
    flex-grow: 2;
    white-space: nowrap;
  }

  .divider > hr {
    margin-top: 10px;
    width: 100%;
    border: 0;
    height: 1px;
    background: #666;
  }

  .divider.left > label {
    order: 1;
    padding-right: 5px;
  }

  .divider.left > hr {
    order: 2
  }

  .divider.right > label {
    padding-left: 5px;
  }
  /* hr bars with centered text */
  /* first HR in a centered version */

  .divider.center >:first-child {
    margin-right: 5px;
  }
  /* second HR in a centered version */

  .divider.center >:last-child {
    margin-left: 5px;
  }
  /** HR style variations **/

  hr.gradient {
    background: transparent;
    background-image: linear-gradient(to right, #f00, #333, #f00);
  }

  hr.gradient2 {
    background: transparent;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }

  hr.dashed {
    background: transparent;
    border: 0;
    border-top: 1px dashed #666;
  }

  hr.dropshadow {
    background: transparent;
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
  }

  hr.blur {
    background: transparent;
    border: 0;
    height: 0;
    /* Firefox... */
    box-shadow: 0 0 10px 1px black;
  }

  hr.blur:after {
    background: transparent;
    /* Not really supposed to work, but does */
    content: "\00a0";
    /* Prevent margin collapse */
  }

  hr.inset {
    background: transparent;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  hr.flared {
    background: transparent;
    overflow: visible;
    /* For IE */
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
  }

  hr.flared:before {
    background: transparent;
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
  }

  hr.double {
    background: transparent;
    overflow: visible;
    /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
  }

  hr.double:after {
    background: transparent;
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
  }

[HTML全文]

<div class="divider left">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider right">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider center">
  <hr />
  <label>Welcome!</label>
  <hr />
</div>
<p>&nbsp;</p>
<div class="divider left fixed">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider right fixed">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider center fixed">
  <hr />
  <label>Welcome!</label>
  <hr />
</div>

或者这里有一个交互式小提琴：http://jsfiddle.net/mpyszenj/439/

0赞 tao 1/4/2019 #26

响应式，透明背景，分隔线的可变高度和样式，文本的可变位置，分隔线和文本之间的可调距离。也可以在同一项目中使用不同的选择器多次应用于多个分隔线样式。
SCSS 下面。

标记（HTML）：

<div class="divider" text-position="right">Divider</div>

CSS：

.divider {
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.divider:before,
.divider:after {
  content: '';
  flex: 0 1 100%;
  border-bottom: 5px dotted #ccc;
  margin: 0 1rem;
}

.divider:before {
  margin-left: 0;
}

.divider:after {
  margin-right: 0;
}

.divider[text-position="right"]:after,
.divider[text-position="left"]:before {
  content: none;
}

如果没有它，则默认为居中。text-position

演示：

.divider {
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.divider:before,
.divider:after {
  content: '';
  flex: 0 1 100%;
  border-bottom: 5px dotted #ccc;
  margin: 0 1rem;
}

.divider:before {
  margin-left: 0;
}

.divider:after {
  margin-right: 0;
}

.divider[text-position="right"]:after,
.divider[text-position="left"]:before {
  content: none;
}

<span class="divider" text-position="left">Divider</span>
<h2 class="divider">Divider</h2>
<div class="divider" text-position="right">Divider</div>

和 SCSS，快速修改它：

$divider-selector    : ".divider";
$divider-border-color: rgba(0,0,0,.21);
$divider-padding     : 1rem;
$divider-border-width: 1px;
$divider-border-style: solid;
$divider-max-width   : 100%;

#{$divider-selector} {
    display: flex;
    align-items: center;
    padding: 0 $divider-padding;
    max-width: $divider-max-width;
    margin-left: auto;
    margin-right: auto;

    &:before,
    &:after {
        content: '';
        flex: 0 1 100%;
        border-bottom: $divider-border-width $divider-border-style $divider-border-color;
        margin: 0 $divider-padding;
        transform: translateY(#{$divider-border-width} / 2)
    }

    &:before {
        margin-left: 0;
    }

    &:after {
        margin-right: 0;
    }

    &[text-position="right"]:after,
    &[text-position="left"]:before {
        content: none;
    }
}

在这里摆弄。

0赞 cadenzah 9/14/2019

嗨，我真的很感谢你的代码片段。如果我放置一个带有英语以外的分隔符的文本（在我的情况下，是韩语），文本每两个字母换行一次。你能弄清楚为什么吗？

6赞 Yftach 5/21/2019 #27

这是一个只有 css 的简单解决方案，没有背景技巧......

.center-separator {
    display: flex;
  line-height: 1em;
  color: gray;
}

.center-separator::before, .center-separator::after {
    content: '';
    display: inline-block;
    flex-grow: 1;
    margin-top: 0.5em;
    background: gray;
    height: 1px;
    margin-right: 10px;
    margin-left: 10px;
  }

HTML格式：

  <div class="center-separator">
    centered text
  </div>

小提琴示例：https://jsfiddle.net/0Lkj6wd3/

0赞 Vignesh 12/9/2019

出色且可重用的解决方案，例如实用程序类。

1赞 Srikrushna 10/17/2019 #28

.orSpan{
  position: absolute;
  margin-top: -1.3rem;
  margin-left:50%;
  padding:0 5px;
  background-color: white;
}

<div>
   <hr> <span class="orSpan">OR</span>
</div>

您可能需要调整 margin 属性

1赞 Nikhil Bhardwaj 4/24/2020 #29

[HTML全文]

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;" class="add-heading">
    <hr class="add-hr">
    <h2>Add Employer</h2>
    <hr class="add-hr">
</div>

CSS的

.add-hr { 
    display: block; height: 1px;
    border: 0; border-top: 4px solid #000;
    margin: 1em 0; padding: 0; 
  }

.add-heading h2{
  text-align: center;
}

1赞 Vũ Đức Vĩ 8/7/2020 #30

请使用 bootstrap 尝试此操作：

<div class="text-center d-flex">
  <hr className="flex-grow-1" />
  <span className="px-2 font-weight-lighter small align-self-center">
    Hello
  </span>
  <hr className="flex-grow-1" />
</div>

这是结果

6赞 Siddhant Varma 8/20/2020 #31

使用 Bootstrap 4，这似乎对我有用：

<div class="row">
  <div class="col"><hr/></div>
  <div class="col-auto">Or</div>
  <div class="col"><hr/></div>
</div>

1赞 Peppe426 12/16/2020 #32

Flexbox 和 SCSS

[HTML全文]

<div class="divider">divider</div>

SCSS系列

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #c2c2c2;

    &::before,
    &::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid #c2c2c2;
    }
    &::before {
        margin-right: 0.25em;
    }
    &::after {
        margin-left: 0.25em;
    }
}

2赞 Nisarg Kapkar 2/1/2021 #33

您可以使用 CSS flex 属性

[HTML全文]

<div class="hrtext">
  <div class="hrbefore">
    <hr>
  </div>
  <div class="hrcontent">
    <h2>TABLE OF CONTENT</h2>
  </div>
  <div class="hrafter">
    <hr>
  </div>
</div>

CSS的

.hrtext{
    display:flex;
    align-items:center;
}
.hrbefore,.hrafter{
    flex:auto;
}
.hrcontent{
    text-align:center;
}

上一个：一个 HTML 元素可以有多个 ID 吗？

下一个：HTML 列表样式类型的破折号

将居中的文本添加到水平线的中间 [复制]

Add centered text to the middle of a horizontal rule [duplicate]

评论

评论

评论

评论

评论

评论

评论

评论

评论

[HTML全文]

CSS的

评论

评论

评论

CSS的

[HTML全文]

评论

评论

评论

[HTML全文]

CSS的