[html] Add centered text to the middle of a <hr/>-like line

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.

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>

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

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.

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

Try this:

.divider {_x000D_
 width:500px;_x000D_
 text-align:center;_x000D_
}_x000D_
_x000D_
.divider hr {_x000D_
 margin-left:auto;_x000D_
 margin-right:auto;_x000D_
 width:40%;_x000D_
_x000D_
}_x000D_
_x000D_
.left {_x000D_
 float:left;_x000D_
}_x000D_
_x000D_
.right {_x000D_
 float:right;_x000D_
}

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

Live preview on jsFiddle.

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 {_x000D_
  display: flex;_x000D_
  align-items: center;_x000D_
  padding: 0 1rem;_x000D_
}_x000D_
_x000D_
.divider:before,_x000D_
.divider:after {_x000D_
  content: '';_x000D_
  flex: 0 1 100%;_x000D_
  border-bottom: 5px dotted #ccc;_x000D_
  margin: 0 1rem;_x000D_
}_x000D_
_x000D_
.divider:before {_x000D_
  margin-left: 0;_x000D_
}_x000D_
_x000D_
.divider:after {_x000D_
  margin-right: 0;_x000D_
}_x000D_
_x000D_
.divider[text-position="right"]:after,_x000D_
.divider[text-position="left"]:before {_x000D_
  content: none;_x000D_
}

<span class="divider" text-position="left">Divider</span>_x000D_
<h2 class="divider">Divider</h2>_x000D_
<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.

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

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

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

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

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

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

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/

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

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/

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

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

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.

How about:

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

Check out this JSFiddle.

You can use vw or % to make it responsive.

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>

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

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

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>

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.

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

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/

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>

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

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>

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

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

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

You may required to adjust the margin property

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.

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

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

Evil hack ...

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