Add centered text to the middle of a
-like line

Question

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.

Here's another thread with a no-extra-tags challenge - and a solution! http://stackoverflow.com/questions/12648513/css-challenge-can-i-do-this-without-introducing-more-html#comment17061217_12648513 — willoller, Sep 29 '12 at 00:06
http://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle is still the best solution. — , Nov 19 '15 at 01:21
Added [an answer](https://stackoverflow.com/a/54034010/1891677) (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`). — tao, Jan 12 '19 at 02:21
Given [current flexbox support](https://caniuse.com/#feat=flexbox) I think [my answer](https://stackoverflow.com/a/26634224/465233) could gain some visibility. — MatTheCat, Oct 31 '19 at 08:36

score 221 · Answer 1 · edited Jul 18 '17 at 15:18

221

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,555
22
24
38

answered May 11 '10 at 17:09

Fletcher Moore

12,599
11
35
57

2

Getting exact top value is a bit hard. It is not exactly -0.5em; – Mitar Dec 04 '11 at 19:47
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 07:35
See [my answer](https://stackoverflow.com/a/54034010/1891677) for responsive, transparent bg, variable style and height of divider, variable position of text. Can also be applied more than once to different selectors, for having more than one style of divider in the same project, using SCSS. Works with any `font-size`. – tao Feb 12 '19 at 22:12

score 196 · Answer 2 · edited Jul 18 '17 at 15:49

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

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 04 '14 at 22:28
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 09:39
The first example is simply awesome! Congrats! It should be the correct answer! — Luiz Eduardo, Mar 15 '16 at 22:28
Very nice example. Also you can align text to left, center and right and it works as expected - unwanted line will disappear. But you need to remove `text-align: center;` for this to work — alaster, Jan 22 '17 at 16:15
To hide overflowing lines to both sides, just set `overflow: hidden` to the parent and voila, constrained striked lines. — Diosney, Aug 20 '18 at 14:36
An updated version that will show a single line without interruption when there is no title: http://jsfiddle.net/z8Hnz/1901/ — db0, Sep 10 '18 at 06:13

MatTheCat · Accepted Answer · 2021-02-11T09:00:16.373

130

Flexbox is the solution:

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

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

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

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

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

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

edited Feb 11 '21 at 09:00

answered Oct 29 '14 at 15:22

MatTheCat

16,312
6
52
66

Best answer considering flexbox support these days – akivajgordon Jan 04 '18 at 02:03
this is a nice solution – Smaillns Jun 03 '20 at 09:40
1

I believe placing a span and giving margins to it instead of pseudo classes is more flexible solution for providing margins to text. In this way, it can be used as a single separator component with or without a text. `
Next section
` `.separator span { margin-left: .25em; margin-right: .25em; }` – Erdem Ergin Jan 07 '21 at 10:57
@ErdemErgin I edited my answer to address your use-case. – MatTheCat Feb 11 '21 at 09:30

score 97 · Answer 4 · edited Sep 30 '20 at 15:41

You can accomplish this with :before and :after without knowing the width of container or background color, and using them allows for 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>

SCSS Version:

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

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

Elegant solution, though it has one caveat: if there will be no text, you'll still have a gap between lines. — Farside, Apr 03 '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

score 52 · Answer 5 · edited Jul 18 '17 at 15:20

52

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,555
22
24
38

answered May 11 '10 at 17:07

Diodeus - James MacFarlane

107,156
31
147
171

4

It works perfectly and uses
so what possibly could be wrong with this answer? I say nothing. – Kirby Nov 06 '11 at 02:34
4

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

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 08:31
This is the best and the simplest answer – ha9u63ar Aug 23 '16 at 17:28
1

40% is wrong here. If the text is longer, it would mis-aligned – TomSawyer Feb 10 '20 at 09:09

Robert Kajic · Answer 6 · 2013-06-25T08:45:44.593

23

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 08:45

answered Sep 20 '12 at 23:22

Robert Kajic

7,605
3
41
42

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 http://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
You should throw appropriate TR tags in there. I think that's what got me confused for a moment. I originally thought for some reason it was on three lines, not three columns. Correct markup probably wouldn't have caused me to see it that way. Regardless, it's definitely a workable solution. – Dracorat Jun 24 '13 at 15:09
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 08 '13 at 18:02

score 10 · Answer 7 · edited May 23 '17 at 11:54

10

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

1
1

answered May 11 '10 at 17:06

willoller

6,556
34
59

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 05 '13 at 00:09

score 7 · Answer 8 · answered Aug 12 '17 at 14:03

7

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

4,979
1
39
68

1

The `vertical-center` class no longer exists in bootstrap (4.3.1). Could you please update your answer to say `align-items-center`? – Cameron Hudson Sep 02 '19 at 21:06

Trey Hunner · Answer 9 · 2010-05-11T17:37:42.967

6

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

8,794
4
42
82

A more detailed explanation of what I was going for. – dclowd9901 May 11 '10 at 17:10
I'm pretty sure `` 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

score 6 · Answer 10 · answered May 11 '10 at 17:16

6

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

answered May 11 '10 at 17:16

Aleksejs Mjaliks

8,319
5
35
44

score 6 · Answer 11 · answered May 21 '19 at 11:30

Heres a simple solution with css only, no background tricks...

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

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

HTML:

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

example fiddle: https://jsfiddle.net/0Lkj6wd3/

Great and reusable solution, like a utility class. – Vignesh Dec 08 '19 at 19:05 — Vignesh, Dec 08 '19 at 19:05

score 5 · Answer 12 · answered Feb 11 '15 at 17:18

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>

score 3 · Answer 13 · answered Sep 18 '12 at 13:30

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.

score 3 · Answer 14 · edited Aug 07 '14 at 12:18

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

score 3 · Answer 15 · answered May 11 '10 at 17:10

3

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

Evil hack ...

answered May 11 '10 at 17:10

Dänu

5,321
9
38
54

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

score 2 · Answer 16 · edited Sep 22 '12 at 03:47

2

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 03:47

Himanshu Jansari

28,446
26
101
128

answered Sep 18 '12 at 08:59

Youri

21
1

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 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 http://skypoetsworld.blogspot.se/2008/10/dont-ever-put-block-inside-inline.html – Jonathan 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 00:06

score 2 · Answer 17 · edited Aug 12 '13 at 01:43

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.

score 2 · Answer 18 · answered Oct 08 '13 at 18:41

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

score 2 · Answer 19 · answered Nov 10 '13 at 10:09

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

score 2 · Answer 20 · answered Aug 01 '14 at 06:53

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>

score 2 · Answer 21 · answered Sep 15 '17 at 01:57

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: "\00a0";
    /* Prevent margin collapse */
  }

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

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

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

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

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

HTML

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

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

score 2 · Answer 22 · answered May 18 '11 at 12:01

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>

score 2 · Answer 23 · edited Aug 27 '20 at 11:06

2

With Bootstrap 4 this seems to be working for me:

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

edited Aug 27 '20 at 11:06

anastaciu

20,013
7
23
43

answered Aug 20 '20 at 12:16

Siddhant Varma

388
2
8

score 1 · Answer 24 · answered Nov 21 '12 at 19:12

1

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

532
5
21

Fieldsets should only be used with forms. – tehlivi Jun 17 '14 at 15:53

score 1 · Answer 25 · 2010-05-11T17:14:11.567

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>

score 1 · Answer 26 · edited Feb 13 '18 at 08:49

1

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 08:49

151291

2,842
6
38
68

answered May 11 '10 at 17:08

dclowd9901

6,458
9
40
59

score 1 · Answer 27 · answered Apr 23 '20 at 17:25

html

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

css

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

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

score 0 · Answer 28 · answered Dec 02 '16 at 13:05

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

tao · Answer 29 · 2019-02-12T22:06:57.367

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.

Hi, I really appreciate your code snippet. If I put a text with divider other than english (in my case, korean), texts break line in every two letters. Could you figure out why? — cadenzah, Sep 13 '19 at 16:31

score 0 · Answer 30 · answered Oct 17 '19 at 09:31

0

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

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

You may required to adjust the margin property

answered Oct 17 '19 at 09:31

Srikrushna

2,652
30
37

score 0 · Answer 31 · answered Jun 01 '20 at 06:24

<div class="divider-line-x"><span>Next section</span></div>

/***** Divider *****/

.divider-line-x {
    position: relative;
    text-align: center; 
    font-family: Arial; 
    font-weight: bold;
    font-size: 12px;    
    color: #333;
    border-bottom: 1px dashed #ccc;
}

.divider-line-x span {
    position: relative; 
    top: 10px;
    padding: 0 25px;    
    background: #fff;
}

score 0 · Answer 32 · answered Aug 07 '20 at 04:28

0

please try this with bootstrap:

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

here is result

answered Aug 07 '20 at 04:28

Vũ Đức Vĩ

11
1

Peppe426 · Answer 33 · 2020-12-16T08:51:24.270

0

Flexbox and SCSS

HTML

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

SCSS

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

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

edited Dec 16 '20 at 08:51

answered Dec 16 '20 at 08:22

Peppe426

11
5

score 0 · Answer 34 · answered Feb 01 '21 at 06:00

You can use the CSS flex property

HTML

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

CSS

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

Add centered text to the middle of a
-like line

34 Answers34

HTML

CSS

html

css

CSS

HTML

Linked

Related

Add centered text to the middle of a -like line

34 Answers34

HTML

CSS

html

css

CSS

HTML

Linked

Related

Add centered text to the middle of a
-like line