Add centered text to the middle of a <hr/>-like line
- by Brian M. Hunt
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>
However 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
