小开

更新:这将不能使用HTML5

相反，查看这个问题以获得更多技巧

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

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

小开

试试这个:

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

小开

你可以在没有<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>

小开

你可以尝试做一个fieldset，并将“legend”元素(你的“next section”文本)对齐到字段的中间，只设置border-top。我不确定一个图例是如何按照字段集元素定位的。不过，我想可能只是一个简单的margin: 0px auto就可以做到这一点。

例子:

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

小开

如果你可以使用CSS并且愿意使用已弃用的align属性，那么有样式的fieldset/图例将工作:

<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: center样式for将不适用于legend元素。align="center"是已弃用的HTML，但它应该在所有浏览器中正确地居中文本。

小开

如何:

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

你可以使用__ABC0或%使它具有响应性。

小开

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

邪恶的黑客…

小开

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

小开

哇，我的第一个帖子，尽管这是一年以前。为了避免包装器的背景着色问题，可以在hr中使用内联块(没有人明确地说过)。文本对齐应该正确居中，因为它们是内联元素。

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

小开

我使用一个中间有span的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 }

就这么简单。

小开

这是一个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。

小开

我也遇到过同样的问题，这里有一个解决方法:

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

小开

总是有很好的FIELDSET

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

小开

看上面，我修改为:

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

超文本标记语言

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

似乎工作得很好。

小开

采用@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上进行了测试)。

小开

< a href = " http://codepen。io/vsync/pen/wcDbB" rel="nofollow">DEMO PAGE . io/vsync/pen/wcDbB" rel="nofollow">DEMO PAGE .

超文本标记语言

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

小开

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

结构

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

小开

这为我工作，不需要背景颜色后面的文本隐藏边界线，而是使用实际的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>

小开

只使用

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

小开

最佳答案

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>

Nowadays every browser supports it, and you can ensure compatibility with decade-old browsers by adding respective vendor prefixes if needed. It would degrade gracefully anyways.

小开

你可以使用相对位置在父节点上设置一个高度

.

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

小开

你可以用: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 Version:

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

小开

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

超文本标记语言

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

小开

引导网格:

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

小开

我做了一个小提琴，使用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;
}

超文本标记语言

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

或者这里有一个交互式的Fiddle: http://jsfiddle.net/mpyszenj/439/

小开

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

标记 (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;
}
}

小提琴在这里。

小开

这里有一个简单的解决方案，只有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/

小开

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

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

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

小开

超文本标记语言

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

小开

请尝试使用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>

这里是结果

小开

与Bootstrap 4，这似乎是为我工作:

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

小开

Flexbox and SCSS

超文本标记语言

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

小开

您可以使用CSS flex属性

超文本标记语言

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

将居中文本添加到水平规则的中间

超文本标记语言

CSS

CSS

超文本标记语言

超文本标记语言

css