Add centered text to the middle of a -like line

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

170

I'm wondering what options one has in xhtml 1.0 strict to create a line on both sides of text like-so:



Section one

----------------------- Next section -----------------------

Section two

I've thought of doing some fancy things like this:

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

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

Next section

Or alternatively, because the above has problems with alignment (both vertical and horizontal):

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

This also has alignment problems, which I solve with this mess:

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

In addition to the alignment problems, both options feel 'fudgy', and I'd be much obliged if you happened to have seen this before and know of an elegant solution.

edited Jan 1 '16 at 4:03

willoller

5,6503057

asked May 11 '10 at 17:00

Brian M. Hunt

36.8k59178298

3

Here's another thread with a no-extra-tags challenge - and a solution! stackoverflow.com/questions/12648513/…

– willoller
Sep 29 '12 at 0:06

1

stackoverflow.com/questions/5214127/… is still the best solution.

– user5579120
Nov 19 '15 at 1:21

A useful answer here would employ CSS Grid.

– Brian M. Hunt
Oct 13 '17 at 0:26

Added an answer (SCSS) which transforms almost any element into a divider without set background and allows setting: color and stroke style (solid, dotted, dashed) of the divider, position of text (left, right, center), as well as the class which applies this (by default .divider).

– Andrei Gheorghiu
Jan 12 at 2:21

add a comment |

170

I'm wondering what options one has in xhtml 1.0 strict to create a line on both sides of text like-so:



Section one

----------------------- Next section -----------------------

Section two

I've thought of doing some fancy things like this:

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

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

Next section

Or alternatively, because the above has problems with alignment (both vertical and horizontal):

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

This also has alignment problems, which I solve with this mess:

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

In addition to the alignment problems, both options feel 'fudgy', and I'd be much obliged if you happened to have seen this before and know of an elegant solution.

edited Jan 1 '16 at 4:03

willoller

5,6503057

asked May 11 '10 at 17:00

Brian M. Hunt

36.8k59178298

3

Here's another thread with a no-extra-tags challenge - and a solution! stackoverflow.com/questions/12648513/…

– willoller
Sep 29 '12 at 0:06

1

stackoverflow.com/questions/5214127/… is still the best solution.

– user5579120
Nov 19 '15 at 1:21

A useful answer here would employ CSS Grid.

– Brian M. Hunt
Oct 13 '17 at 0:26

Added an answer (SCSS) which transforms almost any element into a divider without set background and allows setting: color and stroke style (solid, dotted, dashed) of the divider, position of text (left, right, center), as well as the class which applies this (by default .divider).

– Andrei Gheorghiu
Jan 12 at 2:21

add a comment |

170

I'm wondering what options one has in xhtml 1.0 strict to create a line on both sides of text like-so:



Section one

----------------------- Next section -----------------------

Section two

I've thought of doing some fancy things like this:

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

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

Next section

Or alternatively, because the above has problems with alignment (both vertical and horizontal):

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

This also has alignment problems, which I solve with this mess:

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

In addition to the alignment problems, both options feel 'fudgy', and I'd be much obliged if you happened to have seen this before and know of an elegant solution.

edited Jan 1 '16 at 4:03

willoller

5,6503057

asked May 11 '10 at 17:00

Brian M. Hunt

36.8k59178298

I'm wondering what options one has in xhtml 1.0 strict to create a line on both sides of text like-so:



Section one

----------------------- Next section -----------------------

Section two

I've thought of doing some fancy things like this:

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

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

Next section

Or alternatively, because the above has problems with alignment (both vertical and horizontal):

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

This also has alignment problems, which I solve with this mess:

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

In addition to the alignment problems, both options feel 'fudgy', and I'd be much obliged if you happened to have seen this before and know of an elegant solution.

html css xhtml line vertical-alignment

edited Jan 1 '16 at 4:03

willoller

5,6503057

asked May 11 '10 at 17:00

Brian M. Hunt

36.8k59178298

edited Jan 1 '16 at 4:03

willoller

5,6503057

asked May 11 '10 at 17:00

Brian M. Hunt

36.8k59178298

edited Jan 1 '16 at 4:03

willoller

5,6503057

edited Jan 1 '16 at 4:03

willoller

5,6503057

edited Jan 1 '16 at 4:03

willoller

5,6503057

asked May 11 '10 at 17:00

Brian M. Hunt

36.8k59178298

asked May 11 '10 at 17:00

Brian M. Hunt

36.8k59178298

asked May 11 '10 at 17:00

Brian M. Hunt

36.8k59178298

3

Here's another thread with a no-extra-tags challenge - and a solution! stackoverflow.com/questions/12648513/…

– willoller
Sep 29 '12 at 0:06

1

stackoverflow.com/questions/5214127/… is still the best solution.

– user5579120
Nov 19 '15 at 1:21

A useful answer here would employ CSS Grid.

– Brian M. Hunt
Oct 13 '17 at 0:26

Added an answer (SCSS) which transforms almost any element into a divider without set background and allows setting: color and stroke style (solid, dotted, dashed) of the divider, position of text (left, right, center), as well as the class which applies this (by default .divider).

– Andrei Gheorghiu
Jan 12 at 2:21

add a comment |

3

Here's another thread with a no-extra-tags challenge - and a solution! stackoverflow.com/questions/12648513/…

– willoller
Sep 29 '12 at 0:06

1

stackoverflow.com/questions/5214127/… is still the best solution.

– user5579120
Nov 19 '15 at 1:21

A useful answer here would employ CSS Grid.

– Brian M. Hunt
Oct 13 '17 at 0:26

Added an answer (SCSS) which transforms almost any element into a divider without set background and allows setting: color and stroke style (solid, dotted, dashed) of the divider, position of text (left, right, center), as well as the class which applies this (by default .divider).

– Andrei Gheorghiu
Jan 12 at 2:21

Here's another thread with a no-extra-tags challenge - and a solution! stackoverflow.com/questions/12648513/…

– willoller
Sep 29 '12 at 0:06

stackoverflow.com/questions/5214127/… is still the best solution.

– user5579120
Nov 19 '15 at 1:21

A useful answer here would employ CSS Grid.

– Brian M. Hunt
Oct 13 '17 at 0:26

Added an answer (SCSS) which transforms almost any element into a divider without set background and allows setting: color and stroke style (solid, dotted, dashed) of the divider, position of text (left, right, center), as well as the class which applies this (by default .divider).

– Andrei Gheorghiu
Jan 12 at 2:21

add a comment |

27 Answers
27

active

oldest

votes

199

How about:

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

Check out this JSFiddle.

You can use vw or % to make it responsive.

edited Jul 18 '17 at 15:18

Nisse Engström

4,19392236

answered May 11 '10 at 17:09

Fletcher Moore

7,48693051

2

Getting exact top value is a bit hard. It is not exactly -0.5em;

– Mitar
Dec 4 '11 at 19:47

30

Not good, it has forced white background.

– Pointer Null
Nov 2 '12 at 1:08

perfect. "Responsive" too

– JimXC
Nov 24 '13 at 23:33

4

See my answer for a solution that doesn't require you to specify the background color or the width.

– MartinF
Apr 28 '14 at 7:35

Thank you so much for this....I was looking for responsive

– ponnus
Sep 9 '15 at 11:55

|
show 2 more comments

178

The way to solve this without knowing the width and the background color is the following:

Structure

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

}

Example: http://jsfiddle.net/z8Hnz/

Double line

To create a double line, use one of the following options:

1) Fixed space between lines

.strike > span:before,

.strike > span:after {

    content: "";

    position: absolute;

    top: 50%;

    width: 9999px;

    border-top: 4px double red;

Example: http://jsfiddle.net/z8Hnz/103/

2) Custom space between lines

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

}

Example: http://jsfiddle.net/z8Hnz/105/

SASS (SCSS) version

Based on this solution, I added SCSS "with color property" if it could help someone...

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

        }

    }

}

example of use :

//content.scss

h2 {

    @include bg-strike($col1);

    color: $col1;

}

edited Jul 18 '17 at 15:49

Meloman

1,73931926

answered Mar 24 '14 at 7:44

MartinF

4,63843528

This version works better if you are using an image for the line -- or at least it is easier to edit and remain responsive

– tehlivi
Jun 17 '14 at 15:53

Very nice work! Can you use your wizardry to create a double line? (Otherwise, I'll just resort to using a tiny repeating background image.)

– wloescher
Sep 4 '14 at 22:28

3

Great snippet! Thanks :)

– plong0
Aug 12 '15 at 22:15

1

This is the best answer because it will work without the setting the background , and when you have to set the transparent background

– Dinesh Dabhi
Dec 18 '15 at 9:39

1

The first example is simply awesome! Congrats! It should be the correct answer!

– Luiz Eduardo
Mar 15 '16 at 22:28

|
show 3 more comments

You can accomplish this with ::before and ::after without knowing the width of container or background color, and to achieve greater styling of the line breaks. For example, this can be modified to make double-lines, dotted lines, etc.

JSFiddle

CSS, and HTML usage:

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

answered Mar 22 '16 at 16:19

Omniscience

65558

1

Elegant solution, though it has one caveat: if there will be no text, you'll still have a gap between lines.

– Farside
Apr 3 '16 at 21:47

8

This is the cleanest solution in this thread to be honest, the issue with no text can be overlooked since you would want the divider with text always.

– Robert
Jul 29 '16 at 13:23

add a comment |

Try this:

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

Live preview on jsFiddle.

edited Jul 18 '17 at 15:20

Nisse Engström

4,19392236

answered May 11 '10 at 17:07

Diodeus - James MacFarlane

95.6k29139167

3

It works perfectly and uses <hr /> so what possibly could be wrong with this answer? I say nothing.

– Kirby
Nov 6 '11 at 2:34

3

+1 No need to mess with background color or use tags in unintended ways. One downside is that .divider hr width depends on how long the text is. Suggestion: .divider and .divider hr widths should be specified in em units. To get hr width, use (.divider width minus # of chars) / 2 .

– Kelvin
Jan 31 '13 at 22:38

10

It is not the best solution. What if you have no certainty about the width of the text. All will be ruined when text will be longer.

– Iwona Trąbka
Mar 28 '14 at 8:31

This is the best and the simplest answer

– ha9u63ar
Aug 23 '16 at 17:28

add a comment |

I just came across the same problem, here is one way to solve it:

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

It works without setting a background on the text element, i.e. it will look good regardless what background is behind it.

You can try it out here: http://jsfiddle.net/88vgS/

edited Jun 25 '13 at 8:45

answered Sep 20 '12 at 23:22

Robert Kajic

6,26023439

Doesn't solve the OP's problem. That creates two lines with text between them. He wants a line that's broken part way through and has text at the broken section, then the line continues.

– Dracorat
Jun 21 '13 at 21:11

2

It actually does what the OP is asking for. You can see it at jsfiddle.net/88vgS

– Robert Kajic
Jun 23 '13 at 17:08

Also, what is a line broken part way through, with text at the broken section, if not two lines with text in between them?

– Robert Kajic
Jun 23 '13 at 17:17

I misread the solution - so I reversed my td. Sorry.

– Dracorat
Jun 24 '13 at 2:56

1

But this uses tables, that is a NOT ALLOWED! Oh, just kidding. GRIDS have their place, almost all other GUI XML frameworks recognize that and use them everywhere (e.g. WPF / XAML). Thanks for the solution mate! This deserves more than 3 up votes. I suspect people's aversion to the hated tables will be an obstacle though.

– Nicholas Petersen
Oct 8 '13 at 18:02

|
show 2 more comments

I don't know if this has been figured out but flexbox offers quite a solution:

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

}

See http://jsfiddle.net/MatTheCat/Laut6zyc/ for demo.

Today the compatibility is not that bad (you can add all of old flexbox syntaxes) and it degrades gracefully.

answered Oct 29 '14 at 15:22

MatTheCat

13.9k44259

Best answer considering flexbox support these days

– akivajgordon
Jan 4 '18 at 2:03

155 votes to go!

– MatTheCat
Jan 4 '18 at 8:03

add a comment |

UPDATE: This will not work using HTML5

Instead, check out this question for more techniques: CSS challenge, can I do this without introducing more HTML?

I used line-height:0 to create the effect in the header of my site 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;

}

Another good method is on http://robots.thoughtbot.com/

He uses a background image and floats to achieve a cool effect

edited May 23 '17 at 11:54

Community♦

answered May 11 '10 at 17:06

willoller

5,6503057

1

I like this, it looks great on your site, but I couldn't get it to work (I suspect interference from jQuery css). :( But it is really cool.

– Brian M. Hunt
May 11 '10 at 17:42

I think your h1 is pushing the span down.

– imns
May 17 '12 at 20:56

1

This is a "hack" that employs the different rendering behaviour for DOCTYPE XTHML 1.0 Transitional. If you use DOCTYPE html (for HTML5), it will NOT work.

– Peter
Jan 5 '13 at 0:09

add a comment |

If you can use CSS and are willing to use the deprecated align attribute, a styled fieldset/legend will work:

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

The intended purpose of a fieldset is to logically group form fields. As willoler pointed out, a text-align: center style for will not work for legend elements. align="center" is deprecated HTML but it should center the text properly in all browsers.

edited May 11 '10 at 17:37

answered May 11 '10 at 17:08

Trey Hunner

6,48133353

A more detailed explanation of what I was going for.

– dclowd9901
May 11 '10 at 17:10

1

+1 semantic -1 doesn't actually center legend

– willoller
May 11 '10 at 17:17

I'm pretty sure <legend> takes on the display traits of a block or inline-block element, as it can be padded and margined, which means text-align:center shouldn't work...

– dclowd9901
May 11 '10 at 17:24

yeah legends are great for semantics - i use them for wrapping radio groups but they are notoriously stubborn

– willoller
May 11 '10 at 17:27

I corrected my answer. Unfortunately due to the stubbornness of certain browsers in styling the legend element, align="center" is the only solution I could find that reliably centers a legend.

– Trey Hunner
May 11 '10 at 17:54

add a comment |

You could just use position relative and set a height on the parent

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

answered Feb 11 '15 at 17:18

sidonaldson

14.2k73749

add a comment |

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

answered May 11 '10 at 17:16

Aleksejs Mjaliks

7,35153144

add a comment |

Bootstrap grid:

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;

}

answered Aug 12 '17 at 14:03

dasfdsa

1,6021330

add a comment |

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

    <legend>Test</legend>

</fieldset>

Evil hack ...

answered May 11 '10 at 17:10

Dänu

2,93083453

1

I wouldn't call it a hack, but I would test that it works in all browsers you intend to support.

– Nick Larsen♦
May 11 '10 at 17:27

fieldset doesn't want to be used like that, it's been hacked into place ;-)

– Dänu
May 30 '10 at 16:24

add a comment |

Bumping up a 2 year old post, but here is how I approach these situations using only one element and 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;

}

And here is a fiddle to check it out: http://jsfiddle.net/sRhBc/ (random image from Google taken for the border).

The only drawback of this approach is that it doesn't support IE7.

answered Sep 18 '12 at 13:30

Lazar Vuckovic

688820

add a comment |

Woohoo my first post even though this is a year old. To avoid the background-coloring issues with wrappers, you could use inline-block with hr (nobody said that explicitly). Text-align should center correctly since they are inline elements.

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

answered May 18 '11 at 12:01

Jacob Block

351414

add a comment |

I use a h1 with a span in the middle.

HTML Example:

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

CSS Example:

.archive h1 {border-top:3px dotted #AAAAAA;}

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

Simple as that.

edited Sep 22 '12 at 3:47

hims056

23.2k2291120

answered Sep 18 '12 at 8:59

Youri

211

Welcome to StackOverflow, Youri. Instead of a span, you could consider using a div. It serves the same purpose, except it is naturally a block element. :)

– Nix
Sep 18 '12 at 13:29

@Nix Block element inside inline element? No thanks, span is a good choice

– Jonathan Azulay
Jan 17 '13 at 21:50

1

@MrAzulay h1 is an inline element. span is nice for wrapping stuff, but the reason I prefer a div in this case, is because Youri use CSS to set the span to display:block;. I don't see the point of making an inline element into a block element, when there are suitable block elements (div) readily available.

– Nix
Jan 17 '13 at 23:18

@Nix Isn't that a pretty common thing to do? While putting blocks inside inline is bad practice imo. This is a good post about it skypoetsworld.blogspot.se/2008/10/…

– Jonathan Azulay
Jan 17 '13 at 23:31

Ooops, I mistyped in my latest comment. I agree that you shouldn't place a block inside an inline element, but h1 is actually a BLOCK element. Sorry for the confusion. Still, I don't see the point of making a span into a block element, but fair enough.

– Nix
Jan 18 '13 at 0:06

add a comment |

Looking at above, I modified to:

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>

Seems to work fine.

edited Aug 12 '13 at 1:43

Matt Bryant

4,23042340

answered Aug 12 '13 at 1:20

user2673353

211

add a comment |

Taking @kajic's solution and putting the styling in CSS:

<table class="tablehr">

  <td><hr /></td>

  <td>Text!</td>

  <td><hr /></td>

</table>

Then CSS (but it depends on CSS3 in using nth selector):

.tablehr { width:100%; }

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

Cheers.

(P.S. On tbody and tr, Chrome, IE and Firefox at least automatically inserts a tbody and tr, which is why my sample, like @kajic's, didn't include these so as to keep things shorter in the needed html markup. This solution was tested with newest versions of IE, Chrome, and Firefox, as of 2013).

answered Oct 8 '13 at 18:41

Nicholas Petersen

4,49653659

add a comment |

DEMO PAGE

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

answered Nov 10 '13 at 10:09

vsync

49.5k37166229

add a comment |

This worked for me and does not require background color behind the text to hide a border line, instead uses actual hr tag. You can play around with the widths to get different sizes of hr lines.

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

answered Aug 1 '14 at 6:53

user3898371

211

add a comment |

Just Use

    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;

    }

edited Aug 7 '14 at 12:18

phuzi

4,80012036

answered Aug 7 '14 at 12:09

Anit Garg

211

add a comment |

I made a fiddle that uses FlexBox and will also give you different styles of HR (double line, symbols in the center of the line, drop shadow, inset, dashed, etc).

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: "0a0";

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

Or here's an interactive Fiddle: http://jsfiddle.net/mpyszenj/439/

answered Sep 15 '17 at 1:57

Jade

50739

add a comment |

You could try doing a fieldset, and aligning the "legend" element (your "next section" text) to the middle of the field with only border-top set. I'm not sure about how a legend is positioned in accordance with the fieldset element. I imagine it might just be a simple margin: 0px auto to do the trick, though.

example :

<fieldset>

      <legend>Title</legend>

</fieldset>

edited Feb 13 '18 at 8:49

151291

1,48412446

answered May 11 '10 at 17:08

dclowd9901

4,26373559

add a comment |

You can accomplish this without <hr />. Semantically, design should be done with the means of CSS, in this case it is quite possible.

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>

edited May 11 '10 at 17:14

answered May 11 '10 at 17:07

user151323

add a comment |

There's always the good old FIELDSET

 fieldset

 {

border-left: none;

border-right: none;

border-bottom: none;

 }

 fieldset legend

 {

text-align: center;

padding-left: 10px;

padding-right: 10px;

 }

answered Nov 21 '12 at 19:12

Chet at C2IT

187318

Fieldsets should only be used with forms.

– tehlivi
Jun 17 '14 at 15:53

add a comment |

You can create a wrapper block with some appropriate background image (and also set some background color for your centered text block).

answered May 11 '10 at 17:07

scaryzet

86848

add a comment |

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>

You may modify the width in class "side" and "middle" based on the length of your text in the tag "span". Be sure the width of the "middle" plus 2 times of the width of "side" equal to 100%.

answered Dec 2 '16 at 13:05

Betty Lee

add a comment |

Responsive, transparent background, variable height and style of divider, variable position of text, adjustable distance between divider and text. Can also be applied multiple times with different selectors for multiple divider styles in same project.

SCSS below.

Markup (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;

}

Without text-position it defaults to center.

Demo:

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

And SCSS, to modify it quickly:

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

    }

}

fiddle here.

edited Feb 12 at 22:06

answered Jan 4 at 6:27

Andrei Gheorghiu

36.8k75177

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f2812770%2fadd-centered-text-to-the-middle-of-a-hr-like-line%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

27 Answers
27

active

oldest

votes

27 Answers
27

active

oldest

votes

199

How about:

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

Check out this JSFiddle.

You can use vw or % to make it responsive.

edited Jul 18 '17 at 15:18

Nisse Engström

4,19392236

answered May 11 '10 at 17:09

Fletcher Moore

7,48693051

2

Getting exact top value is a bit hard. It is not exactly -0.5em;

– Mitar
Dec 4 '11 at 19:47

30

Not good, it has forced white background.

– Pointer Null
Nov 2 '12 at 1:08

perfect. "Responsive" too

– JimXC
Nov 24 '13 at 23:33

4

See my answer for a solution that doesn't require you to specify the background color or the width.

– MartinF
Apr 28 '14 at 7:35

Thank you so much for this....I was looking for responsive

– ponnus
Sep 9 '15 at 11:55

|
show 2 more comments

199

How about:

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

Check out this JSFiddle.

You can use vw or % to make it responsive.

edited Jul 18 '17 at 15:18

Nisse Engström

4,19392236

answered May 11 '10 at 17:09

Fletcher Moore

7,48693051

2

Getting exact top value is a bit hard. It is not exactly -0.5em;

– Mitar
Dec 4 '11 at 19:47

30

Not good, it has forced white background.

– Pointer Null
Nov 2 '12 at 1:08

perfect. "Responsive" too

– JimXC
Nov 24 '13 at 23:33

4

See my answer for a solution that doesn't require you to specify the background color or the width.

– MartinF
Apr 28 '14 at 7:35

Thank you so much for this....I was looking for responsive

– ponnus
Sep 9 '15 at 11:55

|
show 2 more comments

199

How about:

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

Check out this JSFiddle.

You can use vw or % to make it responsive.

edited Jul 18 '17 at 15:18

Nisse Engström

4,19392236

answered May 11 '10 at 17:09

Fletcher Moore

7,48693051

How about:

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

Check out this JSFiddle.

You can use vw or % to make it responsive.

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

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

edited Jul 18 '17 at 15:18

Nisse Engström

4,19392236

answered May 11 '10 at 17:09

Fletcher Moore

7,48693051

edited Jul 18 '17 at 15:18

Nisse Engström

4,19392236

edited Jul 18 '17 at 15:18

Nisse Engström

4,19392236

edited Jul 18 '17 at 15:18

Nisse Engström

4,19392236

answered May 11 '10 at 17:09

Fletcher Moore

7,48693051

answered May 11 '10 at 17:09

Fletcher Moore

7,48693051

answered May 11 '10 at 17:09

Fletcher Moore

7,48693051

2

Getting exact top value is a bit hard. It is not exactly -0.5em;

– Mitar
Dec 4 '11 at 19:47

30

Not good, it has forced white background.

– Pointer Null
Nov 2 '12 at 1:08

perfect. "Responsive" too

– JimXC
Nov 24 '13 at 23:33

4

See my answer for a solution that doesn't require you to specify the background color or the width.

– MartinF
Apr 28 '14 at 7:35

Thank you so much for this....I was looking for responsive

– ponnus
Sep 9 '15 at 11:55

|
show 2 more comments

2

Getting exact top value is a bit hard. It is not exactly -0.5em;

– Mitar
Dec 4 '11 at 19:47

30

Not good, it has forced white background.

– Pointer Null
Nov 2 '12 at 1:08

perfect. "Responsive" too

– JimXC
Nov 24 '13 at 23:33

4

See my answer for a solution that doesn't require you to specify the background color or the width.

– MartinF
Apr 28 '14 at 7:35

Thank you so much for this....I was looking for responsive

– ponnus
Sep 9 '15 at 11:55

Getting exact top value is a bit hard. It is not exactly -0.5em;

– Mitar
Dec 4 '11 at 19:47

Not good, it has forced white background.

– Pointer Null
Nov 2 '12 at 1:08

perfect. "Responsive" too

– JimXC
Nov 24 '13 at 23:33

See my answer for a solution that doesn't require you to specify the background color or the width.

– MartinF
Apr 28 '14 at 7:35

Thank you so much for this....I was looking for responsive

– ponnus
Sep 9 '15 at 11:55

|
show 2 more comments

178

The way to solve this without knowing the width and the background color is the following:

Structure

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

}

Example: http://jsfiddle.net/z8Hnz/

Double line

To create a double line, use one of the following options:

1) Fixed space between lines

.strike > span:before,

.strike > span:after {

    content: "";

    position: absolute;

    top: 50%;

    width: 9999px;

    border-top: 4px double red;

Example: http://jsfiddle.net/z8Hnz/103/

2) Custom space between lines

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

}

Example: http://jsfiddle.net/z8Hnz/105/

SASS (SCSS) version

Based on this solution, I added SCSS "with color property" if it could help someone...

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

        }

    }

}

example of use :

//content.scss

h2 {

    @include bg-strike($col1);

    color: $col1;

}

edited Jul 18 '17 at 15:49

Meloman

1,73931926

answered Mar 24 '14 at 7:44

MartinF

4,63843528

This version works better if you are using an image for the line -- or at least it is easier to edit and remain responsive

– tehlivi
Jun 17 '14 at 15:53

Very nice work! Can you use your wizardry to create a double line? (Otherwise, I'll just resort to using a tiny repeating background image.)

– wloescher
Sep 4 '14 at 22:28

3

Great snippet! Thanks :)

– plong0
Aug 12 '15 at 22:15

1

This is the best answer because it will work without the setting the background , and when you have to set the transparent background

– Dinesh Dabhi
Dec 18 '15 at 9:39

1

The first example is simply awesome! Congrats! It should be the correct answer!

– Luiz Eduardo
Mar 15 '16 at 22:28

|
show 3 more comments

178

The way to solve this without knowing the width and the background color is the following:

Structure

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

}

Example: http://jsfiddle.net/z8Hnz/

Double line

To create a double line, use one of the following options:

1) Fixed space between lines

.strike > span:before,

.strike > span:after {

    content: "";

    position: absolute;

    top: 50%;

    width: 9999px;

    border-top: 4px double red;

Example: http://jsfiddle.net/z8Hnz/103/

2) Custom space between lines

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

}

Example: http://jsfiddle.net/z8Hnz/105/

SASS (SCSS) version

Based on this solution, I added SCSS "with color property" if it could help someone...

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

        }

    }

}

example of use :

//content.scss

h2 {

    @include bg-strike($col1);

    color: $col1;

}

edited Jul 18 '17 at 15:49

Meloman

1,73931926

answered Mar 24 '14 at 7:44

MartinF

4,63843528

This version works better if you are using an image for the line -- or at least it is easier to edit and remain responsive

– tehlivi
Jun 17 '14 at 15:53

Very nice work! Can you use your wizardry to create a double line? (Otherwise, I'll just resort to using a tiny repeating background image.)

– wloescher
Sep 4 '14 at 22:28

3

Great snippet! Thanks :)

– plong0
Aug 12 '15 at 22:15

1

This is the best answer because it will work without the setting the background , and when you have to set the transparent background

– Dinesh Dabhi
Dec 18 '15 at 9:39

1

The first example is simply awesome! Congrats! It should be the correct answer!

– Luiz Eduardo
Mar 15 '16 at 22:28

|
show 3 more comments

178

The way to solve this without knowing the width and the background color is the following:

Structure

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

}

Example: http://jsfiddle.net/z8Hnz/

Double line

To create a double line, use one of the following options:

1) Fixed space between lines

.strike > span:before,

.strike > span:after {

    content: "";

    position: absolute;

    top: 50%;

    width: 9999px;

    border-top: 4px double red;

Example: http://jsfiddle.net/z8Hnz/103/

2) Custom space between lines

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

}

Example: http://jsfiddle.net/z8Hnz/105/

SASS (SCSS) version

Based on this solution, I added SCSS "with color property" if it could help someone...

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

        }

    }

}

example of use :

//content.scss

h2 {

    @include bg-strike($col1);

    color: $col1;

}

edited Jul 18 '17 at 15:49

Meloman

1,73931926

answered Mar 24 '14 at 7:44

MartinF

4,63843528

The way to solve this without knowing the width and the background color is the following:

Structure

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

}

Example: http://jsfiddle.net/z8Hnz/

Double line

To create a double line, use one of the following options:

1) Fixed space between lines

.strike > span:before,

.strike > span:after {

    content: "";

    position: absolute;

    top: 50%;

    width: 9999px;

    border-top: 4px double red;

Example: http://jsfiddle.net/z8Hnz/103/

2) Custom space between lines

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

}

Example: http://jsfiddle.net/z8Hnz/105/

SASS (SCSS) version

Based on this solution, I added SCSS "with color property" if it could help someone...

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

        }

    }

}

example of use :

//content.scss

h2 {

    @include bg-strike($col1);

    color: $col1;

}

edited Jul 18 '17 at 15:49

Meloman

1,73931926

answered Mar 24 '14 at 7:44

MartinF

4,63843528

edited Jul 18 '17 at 15:49

Meloman

1,73931926

edited Jul 18 '17 at 15:49

Meloman

1,73931926

edited Jul 18 '17 at 15:49

Meloman

1,73931926

answered Mar 24 '14 at 7:44

MartinF

4,63843528

answered Mar 24 '14 at 7:44

MartinF

4,63843528

answered Mar 24 '14 at 7:44

MartinF

4,63843528

This version works better if you are using an image for the line -- or at least it is easier to edit and remain responsive

– tehlivi
Jun 17 '14 at 15:53

Very nice work! Can you use your wizardry to create a double line? (Otherwise, I'll just resort to using a tiny repeating background image.)

– wloescher
Sep 4 '14 at 22:28

3

Great snippet! Thanks :)

– plong0
Aug 12 '15 at 22:15

1

This is the best answer because it will work without the setting the background , and when you have to set the transparent background

– Dinesh Dabhi
Dec 18 '15 at 9:39

1

The first example is simply awesome! Congrats! It should be the correct answer!

– Luiz Eduardo
Mar 15 '16 at 22:28

|
show 3 more comments

This version works better if you are using an image for the line -- or at least it is easier to edit and remain responsive

– tehlivi
Jun 17 '14 at 15:53

Very nice work! Can you use your wizardry to create a double line? (Otherwise, I'll just resort to using a tiny repeating background image.)

– wloescher
Sep 4 '14 at 22:28

3

Great snippet! Thanks :)

– plong0
Aug 12 '15 at 22:15

1

This is the best answer because it will work without the setting the background , and when you have to set the transparent background

– Dinesh Dabhi
Dec 18 '15 at 9:39

1

The first example is simply awesome! Congrats! It should be the correct answer!

– Luiz Eduardo
Mar 15 '16 at 22:28

This version works better if you are using an image for the line -- or at least it is easier to edit and remain responsive

– tehlivi
Jun 17 '14 at 15:53

Very nice work! Can you use your wizardry to create a double line? (Otherwise, I'll just resort to using a tiny repeating background image.)

– wloescher
Sep 4 '14 at 22:28

Great snippet! Thanks :)

– plong0
Aug 12 '15 at 22:15

This is the best answer because it will work without the setting the background , and when you have to set the transparent background

– Dinesh Dabhi
Dec 18 '15 at 9:39

The first example is simply awesome! Congrats! It should be the correct answer!

– Luiz Eduardo
Mar 15 '16 at 22:28

|
show 3 more comments

JSFiddle

CSS, and HTML usage:

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

answered Mar 22 '16 at 16:19

Omniscience

65558

1

Elegant solution, though it has one caveat: if there will be no text, you'll still have a gap between lines.

– Farside
Apr 3 '16 at 21:47

8

This is the cleanest solution in this thread to be honest, the issue with no text can be overlooked since you would want the divider with text always.

– Robert
Jul 29 '16 at 13:23

add a comment |

JSFiddle

CSS, and HTML usage:

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

answered Mar 22 '16 at 16:19

Omniscience

65558

1

Elegant solution, though it has one caveat: if there will be no text, you'll still have a gap between lines.

– Farside
Apr 3 '16 at 21:47

8

This is the cleanest solution in this thread to be honest, the issue with no text can be overlooked since you would want the divider with text always.

– Robert
Jul 29 '16 at 13:23

add a comment |

JSFiddle

CSS, and HTML usage:

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

answered Mar 22 '16 at 16:19

Omniscience

65558

JSFiddle

CSS, and HTML usage:

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

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

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

answered Mar 22 '16 at 16:19

Omniscience

65558

answered Mar 22 '16 at 16:19

Omniscience

65558

answered Mar 22 '16 at 16:19

Omniscience

65558

answered Mar 22 '16 at 16:19

Omniscience

65558

1

Elegant solution, though it has one caveat: if there will be no text, you'll still have a gap between lines.

– Farside
Apr 3 '16 at 21:47

8

This is the cleanest solution in this thread to be honest, the issue with no text can be overlooked since you would want the divider with text always.

– Robert
Jul 29 '16 at 13:23

add a comment |

1

Elegant solution, though it has one caveat: if there will be no text, you'll still have a gap between lines.

– Farside
Apr 3 '16 at 21:47

8

This is the cleanest solution in this thread to be honest, the issue with no text can be overlooked since you would want the divider with text always.

– Robert
Jul 29 '16 at 13:23

Elegant solution, though it has one caveat: if there will be no text, you'll still have a gap between lines.

– Farside
Apr 3 '16 at 21:47

This is the cleanest solution in this thread to be honest, the issue with no text can be overlooked since you would want the divider with text always.

– Robert
Jul 29 '16 at 13:23

add a comment |

Try this:

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

Live preview on jsFiddle.

edited Jul 18 '17 at 15:20

Nisse Engström

4,19392236

answered May 11 '10 at 17:07

Diodeus - James MacFarlane

95.6k29139167

3

It works perfectly and uses <hr /> so what possibly could be wrong with this answer? I say nothing.

– Kirby
Nov 6 '11 at 2:34

3

+1 No need to mess with background color or use tags in unintended ways. One downside is that .divider hr width depends on how long the text is. Suggestion: .divider and .divider hr widths should be specified in em units. To get hr width, use (.divider width minus # of chars) / 2 .

– Kelvin
Jan 31 '13 at 22:38

10

It is not the best solution. What if you have no certainty about the width of the text. All will be ruined when text will be longer.

– Iwona Trąbka
Mar 28 '14 at 8:31

This is the best and the simplest answer

– ha9u63ar
Aug 23 '16 at 17:28

add a comment |

Try this:

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

Live preview on jsFiddle.

edited Jul 18 '17 at 15:20

Nisse Engström

4,19392236

answered May 11 '10 at 17:07

Diodeus - James MacFarlane

95.6k29139167

3

It works perfectly and uses <hr /> so what possibly could be wrong with this answer? I say nothing.

– Kirby
Nov 6 '11 at 2:34

3

+1 No need to mess with background color or use tags in unintended ways. One downside is that .divider hr width depends on how long the text is. Suggestion: .divider and .divider hr widths should be specified in em units. To get hr width, use (.divider width minus # of chars) / 2 .

– Kelvin
Jan 31 '13 at 22:38

10

It is not the best solution. What if you have no certainty about the width of the text. All will be ruined when text will be longer.

– Iwona Trąbka
Mar 28 '14 at 8:31

This is the best and the simplest answer

– ha9u63ar
Aug 23 '16 at 17:28

add a comment |

Try this:

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

Live preview on jsFiddle.

edited Jul 18 '17 at 15:20

Nisse Engström

4,19392236

answered May 11 '10 at 17:07

Diodeus - James MacFarlane

95.6k29139167

Try this:

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

Live preview on jsFiddle.

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

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

edited Jul 18 '17 at 15:20

Nisse Engström

4,19392236

answered May 11 '10 at 17:07

Diodeus - James MacFarlane

95.6k29139167

edited Jul 18 '17 at 15:20

Nisse Engström

4,19392236

edited Jul 18 '17 at 15:20

Nisse Engström

4,19392236

edited Jul 18 '17 at 15:20

Nisse Engström

4,19392236

answered May 11 '10 at 17:07

Diodeus - James MacFarlane

95.6k29139167

answered May 11 '10 at 17:07

Diodeus - James MacFarlane

95.6k29139167

answered May 11 '10 at 17:07

Diodeus - James MacFarlane

95.6k29139167

3

It works perfectly and uses <hr /> so what possibly could be wrong with this answer? I say nothing.

– Kirby
Nov 6 '11 at 2:34

3

+1 No need to mess with background color or use tags in unintended ways. One downside is that .divider hr width depends on how long the text is. Suggestion: .divider and .divider hr widths should be specified in em units. To get hr width, use (.divider width minus # of chars) / 2 .

– Kelvin
Jan 31 '13 at 22:38

10

It is not the best solution. What if you have no certainty about the width of the text. All will be ruined when text will be longer.

– Iwona Trąbka
Mar 28 '14 at 8:31

This is the best and the simplest answer

– ha9u63ar
Aug 23 '16 at 17:28

add a comment |

3

It works perfectly and uses <hr /> so what possibly could be wrong with this answer? I say nothing.

– Kirby
Nov 6 '11 at 2:34

3

+1 No need to mess with background color or use tags in unintended ways. One downside is that .divider hr width depends on how long the text is. Suggestion: .divider and .divider hr widths should be specified in em units. To get hr width, use (.divider width minus # of chars) / 2 .

– Kelvin
Jan 31 '13 at 22:38

10

It is not the best solution. What if you have no certainty about the width of the text. All will be ruined when text will be longer.

– Iwona Trąbka
Mar 28 '14 at 8:31

This is the best and the simplest answer

– ha9u63ar
Aug 23 '16 at 17:28

It works perfectly and uses <hr /> so what possibly could be wrong with this answer? I say nothing.

– Kirby
Nov 6 '11 at 2:34

+1 No need to mess with background color or use tags in unintended ways. One downside is that .divider hr width depends on how long the text is. Suggestion: .divider and .divider hr widths should be specified in em units. To get hr width, use (.divider width minus # of chars) / 2 .

– Kelvin
Jan 31 '13 at 22:38

It is not the best solution. What if you have no certainty about the width of the text. All will be ruined when text will be longer.

– Iwona Trąbka
Mar 28 '14 at 8:31

This is the best and the simplest answer

– ha9u63ar
Aug 23 '16 at 17:28

add a comment |

I just came across the same problem, here is one way to solve it:

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

It works without setting a background on the text element, i.e. it will look good regardless what background is behind it.

You can try it out here: http://jsfiddle.net/88vgS/

edited Jun 25 '13 at 8:45

answered Sep 20 '12 at 23:22

Robert Kajic

6,26023439

Doesn't solve the OP's problem. That creates two lines with text between them. He wants a line that's broken part way through and has text at the broken section, then the line continues.

– Dracorat
Jun 21 '13 at 21:11

2

It actually does what the OP is asking for. You can see it at jsfiddle.net/88vgS

– Robert Kajic
Jun 23 '13 at 17:08

Also, what is a line broken part way through, with text at the broken section, if not two lines with text in between them?

– Robert Kajic
Jun 23 '13 at 17:17

I misread the solution - so I reversed my td. Sorry.

– Dracorat
Jun 24 '13 at 2:56

1

But this uses tables, that is a NOT ALLOWED! Oh, just kidding. GRIDS have their place, almost all other GUI XML frameworks recognize that and use them everywhere (e.g. WPF / XAML). Thanks for the solution mate! This deserves more than 3 up votes. I suspect people's aversion to the hated tables will be an obstacle though.

– Nicholas Petersen
Oct 8 '13 at 18:02

|
show 2 more comments

I just came across the same problem, here is one way to solve it:

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

It works without setting a background on the text element, i.e. it will look good regardless what background is behind it.

You can try it out here: http://jsfiddle.net/88vgS/

edited Jun 25 '13 at 8:45

answered Sep 20 '12 at 23:22

Robert Kajic

6,26023439

Doesn't solve the OP's problem. That creates two lines with text between them. He wants a line that's broken part way through and has text at the broken section, then the line continues.

– Dracorat
Jun 21 '13 at 21:11

2

It actually does what the OP is asking for. You can see it at jsfiddle.net/88vgS

– Robert Kajic
Jun 23 '13 at 17:08

Also, what is a line broken part way through, with text at the broken section, if not two lines with text in between them?

– Robert Kajic
Jun 23 '13 at 17:17

I misread the solution - so I reversed my td. Sorry.

– Dracorat
Jun 24 '13 at 2:56

1

But this uses tables, that is a NOT ALLOWED! Oh, just kidding. GRIDS have their place, almost all other GUI XML frameworks recognize that and use them everywhere (e.g. WPF / XAML). Thanks for the solution mate! This deserves more than 3 up votes. I suspect people's aversion to the hated tables will be an obstacle though.

– Nicholas Petersen
Oct 8 '13 at 18:02

|
show 2 more comments

I just came across the same problem, here is one way to solve it:

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

It works without setting a background on the text element, i.e. it will look good regardless what background is behind it.

You can try it out here: http://jsfiddle.net/88vgS/

edited Jun 25 '13 at 8:45

answered Sep 20 '12 at 23:22

Robert Kajic

6,26023439

I just came across the same problem, here is one way to solve it:

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

It works without setting a background on the text element, i.e. it will look good regardless what background is behind it.

You can try it out here: http://jsfiddle.net/88vgS/

edited Jun 25 '13 at 8:45

answered Sep 20 '12 at 23:22

Robert Kajic

6,26023439

edited Jun 25 '13 at 8:45

answered Sep 20 '12 at 23:22

Robert Kajic

6,26023439

answered Sep 20 '12 at 23:22

Robert Kajic

6,26023439

answered Sep 20 '12 at 23:22

Robert Kajic

6,26023439

Doesn't solve the OP's problem. That creates two lines with text between them. He wants a line that's broken part way through and has text at the broken section, then the line continues.

– Dracorat
Jun 21 '13 at 21:11

2

It actually does what the OP is asking for. You can see it at jsfiddle.net/88vgS

– Robert Kajic
Jun 23 '13 at 17:08

Also, what is a line broken part way through, with text at the broken section, if not two lines with text in between them?

– Robert Kajic
Jun 23 '13 at 17:17

I misread the solution - so I reversed my td. Sorry.

– Dracorat
Jun 24 '13 at 2:56

1

But this uses tables, that is a NOT ALLOWED! Oh, just kidding. GRIDS have their place, almost all other GUI XML frameworks recognize that and use them everywhere (e.g. WPF / XAML). Thanks for the solution mate! This deserves more than 3 up votes. I suspect people's aversion to the hated tables will be an obstacle though.

– Nicholas Petersen
Oct 8 '13 at 18:02

|
show 2 more comments

Doesn't solve the OP's problem. That creates two lines with text between them. He wants a line that's broken part way through and has text at the broken section, then the line continues.

– Dracorat
Jun 21 '13 at 21:11

2

It actually does what the OP is asking for. You can see it at jsfiddle.net/88vgS

– Robert Kajic
Jun 23 '13 at 17:08

Also, what is a line broken part way through, with text at the broken section, if not two lines with text in between them?

– Robert Kajic
Jun 23 '13 at 17:17

I misread the solution - so I reversed my td. Sorry.

– Dracorat
Jun 24 '13 at 2:56

1

But this uses tables, that is a NOT ALLOWED! Oh, just kidding. GRIDS have their place, almost all other GUI XML frameworks recognize that and use them everywhere (e.g. WPF / XAML). Thanks for the solution mate! This deserves more than 3 up votes. I suspect people's aversion to the hated tables will be an obstacle though.

– Nicholas Petersen
Oct 8 '13 at 18:02

Doesn't solve the OP's problem. That creates two lines with text between them. He wants a line that's broken part way through and has text at the broken section, then the line continues.

– Dracorat
Jun 21 '13 at 21:11

It actually does what the OP is asking for. You can see it at jsfiddle.net/88vgS

– Robert Kajic
Jun 23 '13 at 17:08

Also, what is a line broken part way through, with text at the broken section, if not two lines with text in between them?

– Robert Kajic
Jun 23 '13 at 17:17

I misread the solution - so I reversed my td. Sorry.

– Dracorat
Jun 24 '13 at 2:56

But this uses tables, that is a NOT ALLOWED! Oh, just kidding. GRIDS have their place, almost all other GUI XML frameworks recognize that and use them everywhere (e.g. WPF / XAML). Thanks for the solution mate! This deserves more than 3 up votes. I suspect people's aversion to the hated tables will be an obstacle though.

– Nicholas Petersen
Oct 8 '13 at 18:02

|
show 2 more comments

I don't know if this has been figured out but flexbox offers quite a solution:

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

}

See http://jsfiddle.net/MatTheCat/Laut6zyc/ for demo.

Today the compatibility is not that bad (you can add all of old flexbox syntaxes) and it degrades gracefully.

answered Oct 29 '14 at 15:22

MatTheCat

13.9k44259

Best answer considering flexbox support these days

– akivajgordon
Jan 4 '18 at 2:03

155 votes to go!

– MatTheCat
Jan 4 '18 at 8:03

add a comment |

I don't know if this has been figured out but flexbox offers quite a solution:

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

}

See http://jsfiddle.net/MatTheCat/Laut6zyc/ for demo.

Today the compatibility is not that bad (you can add all of old flexbox syntaxes) and it degrades gracefully.

answered Oct 29 '14 at 15:22

MatTheCat

13.9k44259

Best answer considering flexbox support these days

– akivajgordon
Jan 4 '18 at 2:03

155 votes to go!

– MatTheCat
Jan 4 '18 at 8:03

add a comment |

I don't know if this has been figured out but flexbox offers quite a solution:

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

}

See http://jsfiddle.net/MatTheCat/Laut6zyc/ for demo.

Today the compatibility is not that bad (you can add all of old flexbox syntaxes) and it degrades gracefully.

answered Oct 29 '14 at 15:22

MatTheCat

13.9k44259

I don't know if this has been figured out but flexbox offers quite a solution:

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

}

See http://jsfiddle.net/MatTheCat/Laut6zyc/ for demo.

Today the compatibility is not that bad (you can add all of old flexbox syntaxes) and it degrades gracefully.

answered Oct 29 '14 at 15:22

MatTheCat

13.9k44259

answered Oct 29 '14 at 15:22

MatTheCat

13.9k44259

answered Oct 29 '14 at 15:22

MatTheCat

13.9k44259

answered Oct 29 '14 at 15:22

MatTheCat

13.9k44259

Best answer considering flexbox support these days

– akivajgordon
Jan 4 '18 at 2:03

155 votes to go!

– MatTheCat
Jan 4 '18 at 8:03

add a comment |

Best answer considering flexbox support these days

– akivajgordon
Jan 4 '18 at 2:03

155 votes to go!

– MatTheCat
Jan 4 '18 at 8:03

Best answer considering flexbox support these days

– akivajgordon
Jan 4 '18 at 2:03

155 votes to go!

– MatTheCat
Jan 4 '18 at 8:03

add a comment |

UPDATE: This will not work using HTML5

Instead, check out this question for more techniques: CSS challenge, can I do this without introducing more HTML?

I used line-height:0 to create the effect in the header of my site 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;

}

Another good method is on http://robots.thoughtbot.com/

He uses a background image and floats to achieve a cool effect

edited May 23 '17 at 11:54

Community♦

answered May 11 '10 at 17:06

willoller

5,6503057

1

I like this, it looks great on your site, but I couldn't get it to work (I suspect interference from jQuery css). :( But it is really cool.

– Brian M. Hunt
May 11 '10 at 17:42

I think your h1 is pushing the span down.

– imns
May 17 '12 at 20:56

1

This is a "hack" that employs the different rendering behaviour for DOCTYPE XTHML 1.0 Transitional. If you use DOCTYPE html (for HTML5), it will NOT work.

– Peter
Jan 5 '13 at 0:09

add a comment |

UPDATE: This will not work using HTML5

Instead, check out this question for more techniques: CSS challenge, can I do this without introducing more HTML?

I used line-height:0 to create the effect in the header of my site 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;

}

Another good method is on http://robots.thoughtbot.com/

He uses a background image and floats to achieve a cool effect

edited May 23 '17 at 11:54

Community♦

answered May 11 '10 at 17:06

willoller

5,6503057

1

I like this, it looks great on your site, but I couldn't get it to work (I suspect interference from jQuery css). :( But it is really cool.

– Brian M. Hunt
May 11 '10 at 17:42

I think your h1 is pushing the span down.

– imns
May 17 '12 at 20:56

1

This is a "hack" that employs the different rendering behaviour for DOCTYPE XTHML 1.0 Transitional. If you use DOCTYPE html (for HTML5), it will NOT work.

– Peter
Jan 5 '13 at 0:09

add a comment |

UPDATE: This will not work using HTML5

Instead, check out this question for more techniques: CSS challenge, can I do this without introducing more HTML?

I used line-height:0 to create the effect in the header of my site 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;

}

Another good method is on http://robots.thoughtbot.com/

He uses a background image and floats to achieve a cool effect

edited May 23 '17 at 11:54

Community♦

answered May 11 '10 at 17:06

willoller

5,6503057

UPDATE: This will not work using HTML5

Instead, check out this question for more techniques: CSS challenge, can I do this without introducing more HTML?

I used line-height:0 to create the effect in the header of my site 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;

}

Another good method is on http://robots.thoughtbot.com/

He uses a background image and floats to achieve a cool effect

edited May 23 '17 at 11:54

Community♦

answered May 11 '10 at 17:06

willoller

5,6503057

edited May 23 '17 at 11:54

Community♦

edited May 23 '17 at 11:54

Community♦

edited May 23 '17 at 11:54

Community♦

answered May 11 '10 at 17:06

willoller

5,6503057

answered May 11 '10 at 17:06

willoller

5,6503057

answered May 11 '10 at 17:06

willoller

5,6503057

1

I like this, it looks great on your site, but I couldn't get it to work (I suspect interference from jQuery css). :( But it is really cool.

– Brian M. Hunt
May 11 '10 at 17:42

I think your h1 is pushing the span down.

– imns
May 17 '12 at 20:56

1

This is a "hack" that employs the different rendering behaviour for DOCTYPE XTHML 1.0 Transitional. If you use DOCTYPE html (for HTML5), it will NOT work.

– Peter
Jan 5 '13 at 0:09

add a comment |

1

I like this, it looks great on your site, but I couldn't get it to work (I suspect interference from jQuery css). :( But it is really cool.

– Brian M. Hunt
May 11 '10 at 17:42

I think your h1 is pushing the span down.

– imns
May 17 '12 at 20:56

1

This is a "hack" that employs the different rendering behaviour for DOCTYPE XTHML 1.0 Transitional. If you use DOCTYPE html (for HTML5), it will NOT work.

– Peter
Jan 5 '13 at 0:09

I like this, it looks great on your site, but I couldn't get it to work (I suspect interference from jQuery css). :( But it is really cool.

– Brian M. Hunt
May 11 '10 at 17:42

I think your h1 is pushing the span down.

– imns
May 17 '12 at 20:56

This is a "hack" that employs the different rendering behaviour for DOCTYPE XTHML 1.0 Transitional. If you use DOCTYPE html (for HTML5), it will NOT work.

– Peter
Jan 5 '13 at 0:09

add a comment |

If you can use CSS and are willing to use the deprecated align attribute, a styled fieldset/legend will work:

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

edited May 11 '10 at 17:37

answered May 11 '10 at 17:08

Trey Hunner

6,48133353

A more detailed explanation of what I was going for.

– dclowd9901
May 11 '10 at 17:10

1

+1 semantic -1 doesn't actually center legend

– willoller
May 11 '10 at 17:17

I'm pretty sure <legend> takes on the display traits of a block or inline-block element, as it can be padded and margined, which means text-align:center shouldn't work...

– dclowd9901
May 11 '10 at 17:24

yeah legends are great for semantics - i use them for wrapping radio groups but they are notoriously stubborn

– willoller
May 11 '10 at 17:27

I corrected my answer. Unfortunately due to the stubbornness of certain browsers in styling the legend element, align="center" is the only solution I could find that reliably centers a legend.

– Trey Hunner
May 11 '10 at 17:54

add a comment |

If you can use CSS and are willing to use the deprecated align attribute, a styled fieldset/legend will work:

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

edited May 11 '10 at 17:37

answered May 11 '10 at 17:08

Trey Hunner

6,48133353

A more detailed explanation of what I was going for.

– dclowd9901
May 11 '10 at 17:10

1

+1 semantic -1 doesn't actually center legend

– willoller
May 11 '10 at 17:17

I'm pretty sure <legend> takes on the display traits of a block or inline-block element, as it can be padded and margined, which means text-align:center shouldn't work...

– dclowd9901
May 11 '10 at 17:24

yeah legends are great for semantics - i use them for wrapping radio groups but they are notoriously stubborn

– willoller
May 11 '10 at 17:27

I corrected my answer. Unfortunately due to the stubbornness of certain browsers in styling the legend element, align="center" is the only solution I could find that reliably centers a legend.

– Trey Hunner
May 11 '10 at 17:54

add a comment |

If you can use CSS and are willing to use the deprecated align attribute, a styled fieldset/legend will work:

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

edited May 11 '10 at 17:37

answered May 11 '10 at 17:08

Trey Hunner

6,48133353

If you can use CSS and are willing to use the deprecated align attribute, a styled fieldset/legend will work:

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

edited May 11 '10 at 17:37

answered May 11 '10 at 17:08

Trey Hunner

6,48133353

edited May 11 '10 at 17:37

answered May 11 '10 at 17:08

Trey Hunner

6,48133353

answered May 11 '10 at 17:08

Trey Hunner

6,48133353

answered May 11 '10 at 17:08

Trey Hunner

6,48133353

A more detailed explanation of what I was going for.

– dclowd9901
May 11 '10 at 17:10

1

+1 semantic -1 doesn't actually center legend

– willoller
May 11 '10 at 17:17

I'm pretty sure <legend> takes on the display traits of a block or inline-block element, as it can be padded and margined, which means text-align:center shouldn't work...

– dclowd9901
May 11 '10 at 17:24

yeah legends are great for semantics - i use them for wrapping radio groups but they are notoriously stubborn

– willoller
May 11 '10 at 17:27

I corrected my answer. Unfortunately due to the stubbornness of certain browsers in styling the legend element, align="center" is the only solution I could find that reliably centers a legend.

– Trey Hunner
May 11 '10 at 17:54

add a comment |

A more detailed explanation of what I was going for.

– dclowd9901
May 11 '10 at 17:10

1

+1 semantic -1 doesn't actually center legend

– willoller
May 11 '10 at 17:17

I'm pretty sure <legend> takes on the display traits of a block or inline-block element, as it can be padded and margined, which means text-align:center shouldn't work...

– dclowd9901
May 11 '10 at 17:24

yeah legends are great for semantics - i use them for wrapping radio groups but they are notoriously stubborn

– willoller
May 11 '10 at 17:27

I corrected my answer. Unfortunately due to the stubbornness of certain browsers in styling the legend element, align="center" is the only solution I could find that reliably centers a legend.

– Trey Hunner
May 11 '10 at 17:54

A more detailed explanation of what I was going for.

– dclowd9901
May 11 '10 at 17:10

+1 semantic -1 doesn't actually center legend

– willoller
May 11 '10 at 17:17

I'm pretty sure <legend> takes on the display traits of a block or inline-block element, as it can be padded and margined, which means text-align:center shouldn't work...

– dclowd9901
May 11 '10 at 17:24

yeah legends are great for semantics - i use them for wrapping radio groups but they are notoriously stubborn

– willoller
May 11 '10 at 17:27

I corrected my answer. Unfortunately due to the stubbornness of certain browsers in styling the legend element, align="center" is the only solution I could find that reliably centers a legend.

– Trey Hunner
May 11 '10 at 17:54

add a comment |

You could just use position relative and set a height on the parent

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

answered Feb 11 '15 at 17:18

sidonaldson

14.2k73749

add a comment |

You could just use position relative and set a height on the parent

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

answered Feb 11 '15 at 17:18

sidonaldson

14.2k73749

add a comment |

You could just use position relative and set a height on the parent

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

answered Feb 11 '15 at 17:18

sidonaldson

14.2k73749

You could just use position relative and set a height on the parent

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

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

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

answered Feb 11 '15 at 17:18

sidonaldson

14.2k73749

answered Feb 11 '15 at 17:18

sidonaldson

14.2k73749

answered Feb 11 '15 at 17:18

sidonaldson

14.2k73749

answered Feb 11 '15 at 17:18

sidonaldson

14.2k73749

add a comment |

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

answered May 11 '10 at 17:16

Aleksejs Mjaliks

7,35153144

add a comment |

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

answered May 11 '10 at 17:16

Aleksejs Mjaliks

7,35153144

add a comment |

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

answered May 11 '10 at 17:16

Aleksejs Mjaliks

7,35153144

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

answered May 11 '10 at 17:16

Aleksejs Mjaliks

7,35153144

answered May 11 '10 at 17:16

Aleksejs Mjaliks

7,35153144

answered May 11 '10 at 17:16

Aleksejs Mjaliks

7,35153144

answered May 11 '10 at 17:16

Aleksejs Mjaliks

7,35153144

add a comment |

Bootstrap grid:

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;

}

answered Aug 12 '17 at 14:03

dasfdsa

1,6021330

add a comment |

Bootstrap grid:

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;

}

answered Aug 12 '17 at 14:03

dasfdsa

1,6021330

add a comment |

Bootstrap grid:

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;

}

answered Aug 12 '17 at 14:03

dasfdsa

1,6021330

Bootstrap grid:

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;

}

answered Aug 12 '17 at 14:03

dasfdsa

1,6021330

answered Aug 12 '17 at 14:03

dasfdsa

1,6021330

answered Aug 12 '17 at 14:03

dasfdsa

1,6021330

answered Aug 12 '17 at 14:03

dasfdsa

1,6021330

add a comment |

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

    <legend>Test</legend>

</fieldset>

Evil hack ...

answered May 11 '10 at 17:10

Dänu

2,93083453

1

I wouldn't call it a hack, but I would test that it works in all browsers you intend to support.

– Nick Larsen♦
May 11 '10 at 17:27

fieldset doesn't want to be used like that, it's been hacked into place ;-)

– Dänu
May 30 '10 at 16:24

add a comment |

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

    <legend>Test</legend>

</fieldset>

Evil hack ...

answered May 11 '10 at 17:10

Dänu

2,93083453

1

I wouldn't call it a hack, but I would test that it works in all browsers you intend to support.

– Nick Larsen♦
May 11 '10 at 17:27

fieldset doesn't want to be used like that, it's been hacked into place ;-)

– Dänu
May 30 '10 at 16:24

add a comment |

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

    <legend>Test</legend>

</fieldset>

Evil hack ...

answered May 11 '10 at 17:10

Dänu

2,93083453

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

    <legend>Test</legend>

</fieldset>

Evil hack ...

answered May 11 '10 at 17:10

Dänu

2,93083453

answered May 11 '10 at 17:10

Dänu

2,93083453

answered May 11 '10 at 17:10

Dänu

2,93083453

answered May 11 '10 at 17:10

Dänu

2,93083453

1

I wouldn't call it a hack, but I would test that it works in all browsers you intend to support.

– Nick Larsen♦
May 11 '10 at 17:27

fieldset doesn't want to be used like that, it's been hacked into place ;-)

– Dänu
May 30 '10 at 16:24

add a comment |

1

I wouldn't call it a hack, but I would test that it works in all browsers you intend to support.

– Nick Larsen♦
May 11 '10 at 17:27

fieldset doesn't want to be used like that, it's been hacked into place ;-)

– Dänu
May 30 '10 at 16:24

I wouldn't call it a hack, but I would test that it works in all browsers you intend to support.

– Nick Larsen♦
May 11 '10 at 17:27

fieldset doesn't want to be used like that, it's been hacked into place ;-)

– Dänu
May 30 '10 at 16:24

add a comment |

Bumping up a 2 year old post, but here is how I approach these situations using only one element and 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;

}

And here is a fiddle to check it out: http://jsfiddle.net/sRhBc/ (random image from Google taken for the border).

The only drawback of this approach is that it doesn't support IE7.

answered Sep 18 '12 at 13:30

Lazar Vuckovic

688820

add a comment |

Bumping up a 2 year old post, but here is how I approach these situations using only one element and 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;

}

And here is a fiddle to check it out: http://jsfiddle.net/sRhBc/ (random image from Google taken for the border).

The only drawback of this approach is that it doesn't support IE7.

answered Sep 18 '12 at 13:30

Lazar Vuckovic

688820

add a comment |

Bumping up a 2 year old post, but here is how I approach these situations using only one element and 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;

}

And here is a fiddle to check it out: http://jsfiddle.net/sRhBc/ (random image from Google taken for the border).

The only drawback of this approach is that it doesn't support IE7.

answered Sep 18 '12 at 13:30

Lazar Vuckovic

688820

Bumping up a 2 year old post, but here is how I approach these situations using only one element and 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;

}

And here is a fiddle to check it out: http://jsfiddle.net/sRhBc/ (random image from Google taken for the border).

The only drawback of this approach is that it doesn't support IE7.

answered Sep 18 '12 at 13:30

Lazar Vuckovic

688820

answered Sep 18 '12 at 13:30

Lazar Vuckovic

688820

answered Sep 18 '12 at 13:30

Lazar Vuckovic

688820

answered Sep 18 '12 at 13:30

Lazar Vuckovic

688820

add a comment |

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

answered May 18 '11 at 12:01

Jacob Block

351414

add a comment |

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

answered May 18 '11 at 12:01

Jacob Block

351414

add a comment |

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

answered May 18 '11 at 12:01

Jacob Block

351414

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

answered May 18 '11 at 12:01

Jacob Block

351414

answered May 18 '11 at 12:01

Jacob Block

351414

answered May 18 '11 at 12:01

Jacob Block

351414

answered May 18 '11 at 12:01

Jacob Block

351414

add a comment |

I use a h1 with a span in the middle.

HTML Example:

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

CSS Example:

.archive h1 {border-top:3px dotted #AAAAAA;}

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

Simple as that.

edited Sep 22 '12 at 3:47

hims056

23.2k2291120

answered Sep 18 '12 at 8:59

Youri

211

Welcome to StackOverflow, Youri. Instead of a span, you could consider using a div. It serves the same purpose, except it is naturally a block element. :)

– Nix
Sep 18 '12 at 13:29

@Nix Block element inside inline element? No thanks, span is a good choice

– Jonathan Azulay
Jan 17 '13 at 21:50

1

@MrAzulay h1 is an inline element. span is nice for wrapping stuff, but the reason I prefer a div in this case, is because Youri use CSS to set the span to display:block;. I don't see the point of making an inline element into a block element, when there are suitable block elements (div) readily available.

– Nix
Jan 17 '13 at 23:18

@Nix Isn't that a pretty common thing to do? While putting blocks inside inline is bad practice imo. This is a good post about it skypoetsworld.blogspot.se/2008/10/…

– Jonathan Azulay
Jan 17 '13 at 23:31

Ooops, I mistyped in my latest comment. I agree that you shouldn't place a block inside an inline element, but h1 is actually a BLOCK element. Sorry for the confusion. Still, I don't see the point of making a span into a block element, but fair enough.

– Nix
Jan 18 '13 at 0:06

add a comment |

I use a h1 with a span in the middle.

HTML Example:

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

CSS Example:

.archive h1 {border-top:3px dotted #AAAAAA;}

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

Simple as that.

edited Sep 22 '12 at 3:47

hims056

23.2k2291120

answered Sep 18 '12 at 8:59

Youri

211

Welcome to StackOverflow, Youri. Instead of a span, you could consider using a div. It serves the same purpose, except it is naturally a block element. :)

– Nix
Sep 18 '12 at 13:29

@Nix Block element inside inline element? No thanks, span is a good choice

– Jonathan Azulay
Jan 17 '13 at 21:50

1

@MrAzulay h1 is an inline element. span is nice for wrapping stuff, but the reason I prefer a div in this case, is because Youri use CSS to set the span to display:block;. I don't see the point of making an inline element into a block element, when there are suitable block elements (div) readily available.

– Nix
Jan 17 '13 at 23:18

@Nix Isn't that a pretty common thing to do? While putting blocks inside inline is bad practice imo. This is a good post about it skypoetsworld.blogspot.se/2008/10/…

– Jonathan Azulay
Jan 17 '13 at 23:31

Ooops, I mistyped in my latest comment. I agree that you shouldn't place a block inside an inline element, but h1 is actually a BLOCK element. Sorry for the confusion. Still, I don't see the point of making a span into a block element, but fair enough.

– Nix
Jan 18 '13 at 0:06

add a comment |

I use a h1 with a span in the middle.

HTML Example:

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

CSS Example:

.archive h1 {border-top:3px dotted #AAAAAA;}

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

Simple as that.

edited Sep 22 '12 at 3:47

hims056

23.2k2291120

answered Sep 18 '12 at 8:59

Youri

211

I use a h1 with a span in the middle.

HTML Example:

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

CSS Example:

.archive h1 {border-top:3px dotted #AAAAAA;}

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

Simple as that.

edited Sep 22 '12 at 3:47

hims056

23.2k2291120

answered Sep 18 '12 at 8:59

Youri

211

edited Sep 22 '12 at 3:47

hims056

23.2k2291120

edited Sep 22 '12 at 3:47

hims056

23.2k2291120

edited Sep 22 '12 at 3:47

hims056

23.2k2291120

answered Sep 18 '12 at 8:59

Youri

211

answered Sep 18 '12 at 8:59

Youri

211

answered Sep 18 '12 at 8:59

Youri

211

Welcome to StackOverflow, Youri. Instead of a span, you could consider using a div. It serves the same purpose, except it is naturally a block element. :)

– Nix
Sep 18 '12 at 13:29

@Nix Block element inside inline element? No thanks, span is a good choice

– Jonathan Azulay
Jan 17 '13 at 21:50

1

@MrAzulay h1 is an inline element. span is nice for wrapping stuff, but the reason I prefer a div in this case, is because Youri use CSS to set the span to display:block;. I don't see the point of making an inline element into a block element, when there are suitable block elements (div) readily available.

– Nix
Jan 17 '13 at 23:18

@Nix Isn't that a pretty common thing to do? While putting blocks inside inline is bad practice imo. This is a good post about it skypoetsworld.blogspot.se/2008/10/…

– Jonathan Azulay
Jan 17 '13 at 23:31

Ooops, I mistyped in my latest comment. I agree that you shouldn't place a block inside an inline element, but h1 is actually a BLOCK element. Sorry for the confusion. Still, I don't see the point of making a span into a block element, but fair enough.

– Nix
Jan 18 '13 at 0:06

add a comment |

Welcome to StackOverflow, Youri. Instead of a span, you could consider using a div. It serves the same purpose, except it is naturally a block element. :)

– Nix
Sep 18 '12 at 13:29

@Nix Block element inside inline element? No thanks, span is a good choice

– Jonathan Azulay
Jan 17 '13 at 21:50

1

@MrAzulay h1 is an inline element. span is nice for wrapping stuff, but the reason I prefer a div in this case, is because Youri use CSS to set the span to display:block;. I don't see the point of making an inline element into a block element, when there are suitable block elements (div) readily available.

– Nix
Jan 17 '13 at 23:18

@Nix Isn't that a pretty common thing to do? While putting blocks inside inline is bad practice imo. This is a good post about it skypoetsworld.blogspot.se/2008/10/…

– Jonathan Azulay
Jan 17 '13 at 23:31

Ooops, I mistyped in my latest comment. I agree that you shouldn't place a block inside an inline element, but h1 is actually a BLOCK element. Sorry for the confusion. Still, I don't see the point of making a span into a block element, but fair enough.

– Nix
Jan 18 '13 at 0:06

Welcome to StackOverflow, Youri. Instead of a span, you could consider using a div. It serves the same purpose, except it is naturally a block element. :)

– Nix
Sep 18 '12 at 13:29

@Nix Block element inside inline element? No thanks, span is a good choice

– Jonathan Azulay
Jan 17 '13 at 21:50

@MrAzulay h1 is an inline element. span is nice for wrapping stuff, but the reason I prefer a div in this case, is because Youri use CSS to set the span to display:block;. I don't see the point of making an inline element into a block element, when there are suitable block elements (div) readily available.

– Nix
Jan 17 '13 at 23:18

@Nix Isn't that a pretty common thing to do? While putting blocks inside inline is bad practice imo. This is a good post about it skypoetsworld.blogspot.se/2008/10/…

– Jonathan Azulay
Jan 17 '13 at 23:31

Ooops, I mistyped in my latest comment. I agree that you shouldn't place a block inside an inline element, but h1 is actually a BLOCK element. Sorry for the confusion. Still, I don't see the point of making a span into a block element, but fair enough.

– Nix
Jan 18 '13 at 0:06

add a comment |

Looking at above, I modified to:

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>

Seems to work fine.

edited Aug 12 '13 at 1:43

Matt Bryant

4,23042340

answered Aug 12 '13 at 1:20

user2673353

211

add a comment |

Looking at above, I modified to:

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>

Seems to work fine.

edited Aug 12 '13 at 1:43

Matt Bryant

4,23042340

answered Aug 12 '13 at 1:20

user2673353

211

add a comment |

Looking at above, I modified to:

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>

Seems to work fine.

edited Aug 12 '13 at 1:43

Matt Bryant

4,23042340

answered Aug 12 '13 at 1:20

user2673353

211

Looking at above, I modified to:

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>

Seems to work fine.

edited Aug 12 '13 at 1:43

Matt Bryant

4,23042340

answered Aug 12 '13 at 1:20

user2673353

211

edited Aug 12 '13 at 1:43

Matt Bryant

4,23042340

edited Aug 12 '13 at 1:43

Matt Bryant

4,23042340

edited Aug 12 '13 at 1:43

Matt Bryant

4,23042340

answered Aug 12 '13 at 1:20

user2673353

211

answered Aug 12 '13 at 1:20

user2673353

211

answered Aug 12 '13 at 1:20

user2673353

211

add a comment |

Taking @kajic's solution and putting the styling in CSS:

<table class="tablehr">

  <td><hr /></td>

  <td>Text!</td>

  <td><hr /></td>

</table>

Then CSS (but it depends on CSS3 in using nth selector):

.tablehr { width:100%; }

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

Cheers.

answered Oct 8 '13 at 18:41

Nicholas Petersen

4,49653659

add a comment |

Taking @kajic's solution and putting the styling in CSS:

<table class="tablehr">

  <td><hr /></td>

  <td>Text!</td>

  <td><hr /></td>

</table>

Then CSS (but it depends on CSS3 in using nth selector):

.tablehr { width:100%; }

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

Cheers.

answered Oct 8 '13 at 18:41

Nicholas Petersen

4,49653659

add a comment |

Taking @kajic's solution and putting the styling in CSS:

<table class="tablehr">

  <td><hr /></td>

  <td>Text!</td>

  <td><hr /></td>

</table>

Then CSS (but it depends on CSS3 in using nth selector):

.tablehr { width:100%; }

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

Cheers.

answered Oct 8 '13 at 18:41

Nicholas Petersen

4,49653659

Taking @kajic's solution and putting the styling in CSS:

<table class="tablehr">

  <td><hr /></td>

  <td>Text!</td>

  <td><hr /></td>

</table>

Then CSS (but it depends on CSS3 in using nth selector):

.tablehr { width:100%; }

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

Cheers.

answered Oct 8 '13 at 18:41

Nicholas Petersen

4,49653659

answered Oct 8 '13 at 18:41

Nicholas Petersen

4,49653659

answered Oct 8 '13 at 18:41

Nicholas Petersen

4,49653659

answered Oct 8 '13 at 18:41

Nicholas Petersen

4,49653659

add a comment |

DEMO PAGE

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

answered Nov 10 '13 at 10:09

vsync

49.5k37166229

add a comment |

DEMO PAGE

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

answered Nov 10 '13 at 10:09

vsync

49.5k37166229

add a comment |

DEMO PAGE

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

answered Nov 10 '13 at 10:09

vsync

49.5k37166229

DEMO PAGE

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

answered Nov 10 '13 at 10:09

vsync

49.5k37166229

answered Nov 10 '13 at 10:09

vsync

49.5k37166229

answered Nov 10 '13 at 10:09

vsync

49.5k37166229

answered Nov 10 '13 at 10:09

vsync

49.5k37166229

add a comment |

This worked for me and does not require background color behind the text to hide a border line, instead uses actual hr tag. You can play around with the widths to get different sizes of hr lines.

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

answered Aug 1 '14 at 6:53

user3898371

211

add a comment |

This worked for me and does not require background color behind the text to hide a border line, instead uses actual hr tag. You can play around with the widths to get different sizes of hr lines.

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

answered Aug 1 '14 at 6:53

user3898371

211

add a comment |

This worked for me and does not require background color behind the text to hide a border line, instead uses actual hr tag. You can play around with the widths to get different sizes of hr lines.

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

answered Aug 1 '14 at 6:53

user3898371

211

This worked for me and does not require background color behind the text to hide a border line, instead uses actual hr tag. You can play around with the widths to get different sizes of hr lines.

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

answered Aug 1 '14 at 6:53

user3898371

211

answered Aug 1 '14 at 6:53

user3898371

211

answered Aug 1 '14 at 6:53

user3898371

211

answered Aug 1 '14 at 6:53

user3898371

211

add a comment |

Just Use

    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;

    }

edited Aug 7 '14 at 12:18

phuzi

4,80012036

answered Aug 7 '14 at 12:09

Anit Garg

211

add a comment |

Just Use

    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;

    }

edited Aug 7 '14 at 12:18

phuzi

4,80012036

answered Aug 7 '14 at 12:09

Anit Garg

211

add a comment |

Just Use

    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;

    }

edited Aug 7 '14 at 12:18

phuzi

4,80012036

answered Aug 7 '14 at 12:09

Anit Garg

211

Just Use

    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;

    }

edited Aug 7 '14 at 12:18

phuzi

4,80012036

answered Aug 7 '14 at 12:09

Anit Garg

211

edited Aug 7 '14 at 12:18

phuzi

4,80012036

edited Aug 7 '14 at 12:18

phuzi

4,80012036

edited Aug 7 '14 at 12:18

phuzi

4,80012036

answered Aug 7 '14 at 12:09

Anit Garg

211

answered Aug 7 '14 at 12:09

Anit Garg

211

answered Aug 7 '14 at 12:09

Anit Garg

211

add a comment |

I made a fiddle that uses FlexBox and will also give you different styles of HR (double line, symbols in the center of the line, drop shadow, inset, dashed, etc).

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: "0a0";

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

Or here's an interactive Fiddle: http://jsfiddle.net/mpyszenj/439/

answered Sep 15 '17 at 1:57

Jade

50739

add a comment |

I made a fiddle that uses FlexBox and will also give you different styles of HR (double line, symbols in the center of the line, drop shadow, inset, dashed, etc).

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: "0a0";

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

Or here's an interactive Fiddle: http://jsfiddle.net/mpyszenj/439/

answered Sep 15 '17 at 1:57

Jade

50739

add a comment |

I made a fiddle that uses FlexBox and will also give you different styles of HR (double line, symbols in the center of the line, drop shadow, inset, dashed, etc).

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: "0a0";

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

Or here's an interactive Fiddle: http://jsfiddle.net/mpyszenj/439/

answered Sep 15 '17 at 1:57

Jade

50739

I made a fiddle that uses FlexBox and will also give you different styles of HR (double line, symbols in the center of the line, drop shadow, inset, dashed, etc).

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: "0a0";

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

Or here's an interactive Fiddle: http://jsfiddle.net/mpyszenj/439/

answered Sep 15 '17 at 1:57

Jade

50739

answered Sep 15 '17 at 1:57

Jade

50739

answered Sep 15 '17 at 1:57

Jade

50739

answered Sep 15 '17 at 1:57

Jade

50739

add a comment |

example :

<fieldset>

      <legend>Title</legend>

</fieldset>

edited Feb 13 '18 at 8:49

151291

1,48412446

answered May 11 '10 at 17:08

dclowd9901

4,26373559

add a comment |

example :

<fieldset>

      <legend>Title</legend>

</fieldset>

edited Feb 13 '18 at 8:49

151291

1,48412446

answered May 11 '10 at 17:08

dclowd9901

4,26373559

add a comment |

example :

<fieldset>

      <legend>Title</legend>

</fieldset>

edited Feb 13 '18 at 8:49

151291

1,48412446

answered May 11 '10 at 17:08

dclowd9901

4,26373559

example :

<fieldset>

      <legend>Title</legend>

</fieldset>

edited Feb 13 '18 at 8:49

151291

1,48412446

answered May 11 '10 at 17:08

dclowd9901

4,26373559

edited Feb 13 '18 at 8:49

151291

1,48412446

edited Feb 13 '18 at 8:49

151291

1,48412446

edited Feb 13 '18 at 8:49

151291

1,48412446

answered May 11 '10 at 17:08

dclowd9901

4,26373559

answered May 11 '10 at 17:08

dclowd9901

4,26373559

answered May 11 '10 at 17:08

dclowd9901

4,26373559

add a comment |

You can accomplish this without <hr />. Semantically, design should be done with the means of CSS, in this case it is quite possible.

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>

edited May 11 '10 at 17:14

answered May 11 '10 at 17:07

user151323

add a comment |

You can accomplish this without <hr />. Semantically, design should be done with the means of CSS, in this case it is quite possible.

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>

edited May 11 '10 at 17:14

answered May 11 '10 at 17:07

user151323

add a comment |

You can accomplish this without <hr />. Semantically, design should be done with the means of CSS, in this case it is quite possible.

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>

edited May 11 '10 at 17:14

answered May 11 '10 at 17:07

user151323

You can accomplish this without <hr />. Semantically, design should be done with the means of CSS, in this case it is quite possible.

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>

edited May 11 '10 at 17:14

answered May 11 '10 at 17:07

user151323

edited May 11 '10 at 17:14

answered May 11 '10 at 17:07

user151323

answered May 11 '10 at 17:07

user151323

answered May 11 '10 at 17:07

user151323

add a comment |

There's always the good old FIELDSET

 fieldset

 {

border-left: none;

border-right: none;

border-bottom: none;

 }

 fieldset legend

 {

text-align: center;

padding-left: 10px;

padding-right: 10px;

 }

answered Nov 21 '12 at 19:12

Chet at C2IT

187318

Fieldsets should only be used with forms.

– tehlivi
Jun 17 '14 at 15:53

add a comment |

There's always the good old FIELDSET

 fieldset

 {

border-left: none;

border-right: none;

border-bottom: none;

 }

 fieldset legend

 {

text-align: center;

padding-left: 10px;

padding-right: 10px;

 }

answered Nov 21 '12 at 19:12

Chet at C2IT

187318

Fieldsets should only be used with forms.

– tehlivi
Jun 17 '14 at 15:53

add a comment |

There's always the good old FIELDSET

 fieldset

 {

border-left: none;

border-right: none;

border-bottom: none;

 }

 fieldset legend

 {

text-align: center;

padding-left: 10px;

padding-right: 10px;

 }

answered Nov 21 '12 at 19:12

Chet at C2IT

187318

There's always the good old FIELDSET

 fieldset

 {

border-left: none;

border-right: none;

border-bottom: none;

 }

 fieldset legend

 {

text-align: center;

padding-left: 10px;

padding-right: 10px;

 }

answered Nov 21 '12 at 19:12

Chet at C2IT

187318

answered Nov 21 '12 at 19:12

Chet at C2IT

187318

answered Nov 21 '12 at 19:12

Chet at C2IT

187318

answered Nov 21 '12 at 19:12

Chet at C2IT

187318

Fieldsets should only be used with forms.

– tehlivi
Jun 17 '14 at 15:53

add a comment |

Fieldsets should only be used with forms.

– tehlivi
Jun 17 '14 at 15:53

Fieldsets should only be used with forms.

– tehlivi
Jun 17 '14 at 15:53

add a comment |

You can create a wrapper block with some appropriate background image (and also set some background color for your centered text block).

answered May 11 '10 at 17:07

scaryzet

86848

add a comment |

You can create a wrapper block with some appropriate background image (and also set some background color for your centered text block).

answered May 11 '10 at 17:07

scaryzet

86848

add a comment |

You can create a wrapper block with some appropriate background image (and also set some background color for your centered text block).

answered May 11 '10 at 17:07

scaryzet

86848

You can create a wrapper block with some appropriate background image (and also set some background color for your centered text block).

answered May 11 '10 at 17:07

scaryzet

86848

answered May 11 '10 at 17:07

scaryzet

86848

answered May 11 '10 at 17:07

scaryzet

86848

answered May 11 '10 at 17:07

scaryzet

86848

add a comment |

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>

You may modify the width in class "side" and "middle" based on the length of your text in the tag "span". Be sure the width of the "middle" plus 2 times of the width of "side" equal to 100%.

answered Dec 2 '16 at 13:05

Betty Lee

add a comment |

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>

You may modify the width in class "side" and "middle" based on the length of your text in the tag "span". Be sure the width of the "middle" plus 2 times of the width of "side" equal to 100%.

answered Dec 2 '16 at 13:05

Betty Lee

add a comment |

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>

You may modify the width in class "side" and "middle" based on the length of your text in the tag "span". Be sure the width of the "middle" plus 2 times of the width of "side" equal to 100%.

answered Dec 2 '16 at 13:05

Betty Lee

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>

You may modify the width in class "side" and "middle" based on the length of your text in the tag "span". Be sure the width of the "middle" plus 2 times of the width of "side" equal to 100%.

answered Dec 2 '16 at 13:05

Betty Lee

answered Dec 2 '16 at 13:05

Betty Lee

answered Dec 2 '16 at 13:05

Betty Lee

answered Dec 2 '16 at 13:05

Betty Lee

add a comment |

Markup (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;

}

Without text-position it defaults to center.

Demo:

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

And SCSS, to modify it quickly:

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

    }

}

fiddle here.

edited Feb 12 at 22:06

answered Jan 4 at 6:27

Andrei Gheorghiu

36.8k75177

add a comment |

Markup (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;

}

Without text-position it defaults to center.

Demo:

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

And SCSS, to modify it quickly:

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

    }

}

fiddle here.

edited Feb 12 at 22:06

answered Jan 4 at 6:27

Andrei Gheorghiu

36.8k75177

add a comment |

Markup (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;

}

Without text-position it defaults to center.

Demo:

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

And SCSS, to modify it quickly:

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

    }

}

fiddle here.

edited Feb 12 at 22:06

answered Jan 4 at 6:27

Andrei Gheorghiu

36.8k75177

Markup (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;

}

Without text-position it defaults to center.

Demo:

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

And SCSS, to modify it quickly:

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

    }

}

fiddle here.

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

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

edited Feb 12 at 22:06

answered Jan 4 at 6:27

Andrei Gheorghiu

36.8k75177

edited Feb 12 at 22:06

answered Jan 4 at 6:27

Andrei Gheorghiu

36.8k75177

answered Jan 4 at 6:27

Andrei Gheorghiu

36.8k75177

answered Jan 4 at 6:27

Andrei Gheorghiu

36.8k75177

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk

Add centered text to the middle of a -like line

27 Answers
27

HTML

CSS

CSS

HTML

Your Answer

Post as a guest

27 Answers
27

27 Answers
27

HTML

CSS

HTML

CSS

HTML

CSS

HTML

CSS

CSS

HTML

CSS

HTML

CSS

HTML

CSS

HTML

Post as a guest

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas

Add centered text to the middle of a -like line

27 Answers 27

HTML

CSS

CSS

HTML

Your Answer

Sign up or log in

Post as a guest

Post as a guest

27 Answers 27

27 Answers 27

HTML

CSS

HTML

CSS

HTML

CSS

HTML

CSS

CSS

HTML

CSS

HTML

CSS

HTML

CSS

HTML

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas

27 Answers
27

27 Answers
27

27 Answers
27