how to have text between an HR line - html

Question

How can I have my text between an <HR> line?
For example: http://jsfiddle.net/VrvvX/
<div id="outerDiv">
<button id="myButton">Do This</button>
<br>-----------or do something else-<br>
<table id="mytable">
<tr>
<td>Blah:</td>
<td><select id="foo"></select></td>
</tr>
<tr>
<td>Blah:</td>
<td><select id="foo"></select></td>
</tr>
</table>​
Rather than having ----- I'd like to have a pretty <hr> tag which works like a separator between the button and the table.

Answer 1

Set two <hr/> tags to display: inline-block and put a width on them with the text in between. Like this fiddle. Though you may want to adjust the positioning of it.

Answer 2

In addition to Tomás solution, you could create a HR class and add content: attr(data-content); to it. And then use the following HTML <hr class="hr-1" data-content="CONTENT HERE"/>.
This way you can fill in the content through HTML rather than CSS.
Fiddle:
https://jsfiddle.net/xqeuzrg7/

Answer 3

You could do something like this :
<div style="background: url('line-background.png') 50% 50% repeat-x;width: 100%;text-align: center;">
Do this
</div>
Of course you can adjust width or play with padding: 0 ?px;
EDIT :
If you want to hide background under the title you can do :
<div style="background: url('line-background.png') 50% 50% repeat-x;width: 100%;text-align: center;">
<span style="background: white;padding: 2px;"> Do this</div>
</div>

Answer 4

I think this is not the best practice to do this but you can use this css for the <hr/> tag and it will properly work:
hr {
padding: 0;
border: none;
border-top: 1px dashed #CCC;
color: #333;
text-align: center;
font-size:12px;
}
hr:after {
content:"or do something else";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}​
I have updated your example, see if this is what you want:
http://jsfiddle.net/VrvvX/146/