Add centered text to the middle of a <hr/>-like line
Posted
by Brian M. Hunt
on Stack Overflow
See other posts from Stack Overflow
or by Brian M. Hunt
Published on 2010-05-11T17:00:12Z
Indexed on
2010/05/11
17:04 UTC
Read the original article
Hit count: 346
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
© Stack Overflow or respective owner