将居中的文本添加到类似<hr />的行的中间


217

我想知道xhtml 1.0中有哪些严格选项可以在像这样的文本两边都创建一行:

第一节
-----------------------下一部分-----------------------
第二节

我曾经想过要做一些花哨的事情,例如:

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

除了对齐问题之外,这两个选项都让人感到“前途未卜”,如果您碰巧曾经见过这一点并且知道一个优雅的解决方案,我将非常感激。


3
这是另一个没有标签挑战的话题-一个解决方案!stackoverflow.com/questions/12648513/...
willoller

1
stackoverflow.com/questions/5214127/…仍然是最佳解决方案。

一个有用的答案是使用CSS Grid。
布赖恩·亨特

添加了一个答案(SCSS),可将几乎所有元素转换为无需设置背景的分隔线,并可以进行设置:分隔线的颜色和笔触样式(实线,点线,虚线),文本的位置(左,右,居中)以及适用于此的类(默认为.divider)。

考虑到当前的flexbox支持,我认为我的答案可能会有所了解。
MatTheCat

Answers:


63

我不知道这是否已经解决,但是flexbox提供了一个解决方案:

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

.separator {
    display: flex;
    align-items: center;
    text-align: center;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
}
.separator::before {
    margin-right: .25em;
}
.separator::after {
    margin-left: .25em;
}

参见http://jsfiddle.net/MatTheCat/Laut6zyc/演示,。

如今,兼容性还不错(您可以添加所有旧的flexbox语法),并且可以正常降级。


这些天考虑考虑Flexbox支持的最佳答案
akivajgordon '18年

这是一个不错的解决方案
Smaillns

217

怎么样:

<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
要获得确切的最高价值有些困难。它不完全是-0.5em;
Mitar

完善。也是“响应式的”
JimXC

4
请参阅我的答案以获取不需要指定背景颜色或宽度的解决方案。
MartinF 2014年

请参阅我的答案,以获取灵敏的透明bg,可变的样式和分隔线高度,可变的文本位置。也可以使用SCSS多次应用于不同的选择器,以在同一项目中具有多个样式的分隔符。适用于任何font-size

193

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

结构体

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

如果您在生产线上使用图像,则此版本效果更好-或者至少更容易编辑和保持响应
-tehlivi

非常好!您可以使用巫术来创建双线吗?(否则,我将诉诸于使用微小的重复背景图像。)
wloescher 2014年

3
很棒的摘要!谢谢:)
plong0

2
这是最好的答案,因为它无需设置背景即可工作,而必须设置透明背景时
Dinesh Dabhi 2015年

1
第一个例子简直太棒了!恭喜!它应该是正确的答案!
Luiz Eduardo

86

您可以使用:: 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
优雅的解决方案,尽管有一个警告:如果没有文本,行之间仍然会有空白。
远端

13
老实说,这是该线程中最干净的解决方案,可以忽略无文本的问题,因为您希望始终使用文本分隔符。
罗伯特

51

试试这个:

.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
它可以完美运行并使用<hr />,那么此答案可能有什么问题呢?我无话可说。
柯比(Kirby)

4
+1无需弄乱背景色或以意外方式使用标签。缺点之一是.divider hr宽度取决于文本的长度。建议:.divider.divider hr宽度应在指定em单位。要获取hr宽度,请使用(.divider宽度减去字符数)/ 2。
开尔文

12
这不是最佳解决方案。如果您不确定文本的宽度怎么办。当文本更长时,所有内容都将被破坏。
IwonaTrąbka2014年

这是最好,最简单的答案
ha9u63ar

1
这里有40%错误。如果文本较长,它将无法对齐
TomSawyer

21

我刚遇到相同的问题,这是解决问题的一种方法:

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


无法解决OP的问题。这将在两行之间创建文本。他想要一条贯穿整个过程的折线,并且在折断部分中有文字,然后继续。
Dracorat

2
它实际上完成了OP所要求的。您可以在jsfiddle.net/88vgS上
Robert Kajic 2013年

另外,如果不是两行之间有文本,则断行的那一行是什么?
罗伯特·卡季奇

您应该在其中放置适当的TR标签。我认为那是让我困惑的片刻。我最初以某种原因认为它位于三行而不是三列。正确的标记可能不会导致我那样看。无论如何,这绝对是一个可行的解决方案。
Dracorat 2013年

1
但这使用表,这是不允许的!哦,开玩笑。GRIDS占有一席之地,几乎所有其他GUI XML框架都可以识别并在任何地方使用它们(例如WPF / XAML)。感谢您的解决方案伙伴!这值得三票以上。我怀疑人们对仇恨表的厌恶将是一个障碍。
Nicholas Petersen 2013年

10

更新:这将无法使用HTML5

相反,请查看此问题以了解更多技术:CSS挑战,是否可以在不引入更多HTML的情况下做到这一点?


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

<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
我喜欢这个,它在您的网站上看起来不错,但无法正常工作(我怀疑是jQuery CSS的干扰)。:(但它真的很酷。
布赖恩M.亨特

我认为您的h1正在降低跨度。
imns 2012年

1
这是为DOCTYPE XTHML 1.0 Transitional采用不同的呈现行为的“ hack”。如果您使用DOCTYPE html(用于HTML5),则将无法使用。
彼得

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

6

如果可以使用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指出的那样,text-align: centerfor 的样式将不适用于legend元素。 align="center"已弃用HTML,但应在所有浏览器中将文本正确居中。


我要做什么的更详细的解释。
dclowd9901,2010年

我敢肯定,<legend>呈现的显示特性blockinline-block元素,因为它可以填充保证金,其手段text-align:center不应该工作...
dclowd9901

是啊传说的语义是伟大的-我把它们用于包装无线电组,但是他们是出了名倔强
willoller

我纠正了我的答案。不幸的是,由于某些浏览器在设置legend元素样式方面的固执,align="center"是我能找到的唯一使a可靠居中的解决方案legend
Trey Hunner,2010年

6

引导网格:

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
vertical-center级不再自举(4.3.1)的存在。你能更新你的回答说align-items-center吗?
卡梅隆·哈德森

5

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

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


5

这是仅使用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/


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

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

邪恶的入侵...


1
我不会称其为hack,但我会测试它是否可以在您打算支持的所有浏览器中使用。
尼克·拉森

字段集不希望这样的使用,它被黑客侵入的地方;-)
达努

3

颠覆了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。


3

只需使用

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

2

Woohoo我的第一篇文章,即使它已经一岁了。为了避免包装器出现背景色问题,您可以将hr与inline-block一起使用(没人明确说过)。文本对齐应该正确居中,因为它们是内联元素。

<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

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 }

就那么简单。


欢迎来到Stackiflow,Youri。span您可以考虑使用而不是a div。它具有相同的目的,只是它自然是一个块元素。:)
Nix 2012年

@Nix内联元素中的块元素?不,谢谢,跨度是个不错的选择
Jonathan Azulay

1
@MrAzulay h1是一个内联元素。span非常适合包装东西,但div在这种情况下,我更喜欢使用a的原因是因为Youli使用CSS将设置spandisplay:block;。当div容易获得合适的块元素()时,我看不到将内联元素变成块元素的意义。
Nix

@Nix这不是很普通的事情吗?虽然将块放在行内是不好的做法imo。这是一个关于它的好帖子skypoetsworld.blogspot.se/2008/10/…–
Jonathan Azulay

糟糕,我在最新评论中输入错误。我同意您不应在内联元素中放置一个块,而h1实际上是一个BLOCK元素。对困惑感到抱歉。不过,我看不出将a span变成块元素的意义,但足够公平。
Nix

2

从上面看,我修改为:

的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

采用@kajic的解决方案并将样式放在CSS中:

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

然后是CSS(但在使用第n个选择器时取决于CSS3):

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

干杯。

(PS在tbody和tr上,Chrome,IE和Firefox至少会自动插入tbody和tr,这就是为什么我的示例(如@kajic的示例)不包含这些内容,以使所需的html标记中的内容更短。截至2013年,已使用IE,Chrome和Firefox的最新版本进行了测试。


2

演示页

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

2

这对我有用,不需要文本后面的背景色来隐藏边框,而是使用实际的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

我做了一个使用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/


2

您可以尝试进行fieldset,然后将“传奇”元素(您的“下一部分”文本)与仅border-top设置的字段中间对齐。我不确定图例如何根据fieldset元素定位。我想这可能很简单margin: 0px auto

例如:

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

1

您无需使用即可完成此操作<hr />。从语义上讲,设计应该使用CSS的方法来完成,在这种情况下,这是很有可能的。

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>

1

总是有好旧的FIELDSET

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

字段集仅应与表单一起使用。
tehlivi 2014年

1

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

0

您可以使用一些适当的背景图像创建包装程序块(也可以为居中的文本块设置一些背景色)。


0

的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%。


0

敏感,透明的背景,分隔线的高度和样式可变,文本的位置可变,分隔线和文本之间的距离可调。也可以使用不同的选择器多次应用同一项目中的多个分隔符样式。
下面的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它默认为居中。

演示:

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

在这里摆弄


嗨,我非常感谢您的代码段。如果我用除英语以外的分隔符放置文本(在我的情况下为韩文),则文本每两个字母换行。你能弄清楚为什么吗?
cadenzah

0

.orSpan{
  position: absolute;
  margin-top: -1.3rem;
  margin-left:50%;
  padding:0 5px;
  background-color: white;
}
<div>
   <hr> <span class="orSpan">OR</span>
</div>

您可能需要调整保证金属性

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.