Add centered text to the middle of a <hr/>-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.

Thank you for reading.

Brian

Answer 1

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

Answer 2

Try this:

CSS:

.divider {
    width:500px;
    text-align:center;
}

.divider hr {
    margin-left:auto;
    margin-right:auto;
    width:40%;

}

.left {
    float:left;
}

.right {
    float:right;
}

HTML:

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

Answer 3

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

Answer 4

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>

Answer 5

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.

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

Answer 7

How about:

<div style="height: 2px; background-color: black; text-align: center">
  <span style="background-color: white; position: relative; top: -0.5em;">
    Section Title
  </span>
</div>

position: relative; top: -0.5em; is the key to this method. It lets you vertically center the text. Unfortunately this method requires you to know the background color of your site so that the text doesn't end up looking like it has a line through it.

As an alternative to using a background color to create the line, you could use border-top. With that you could bring in border effects like dotted lines.

Answer 8

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

Evil hack ...

Answer 9

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