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

Filed under:
|
|
|

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

Related posts about html

Related posts about vertical-align