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