Creating Horizontal Title Bars using Spans - html

Question

I wanted to create a title thats centered within a div with two spans to the left and right of it. I managed to do so but there's two issues I just can't seem to think of a solution for.
The first involves vertically centering the two border spans with
the middle span 'Title'.
The second is having the left border expand all to the left edge of the div and vice versa for the right (obviously the width of the spans would need to be changed from the original).
Using two hrs seemed like a good idea but would it probably involve too much hacking to do something so simple.
HTML
<div id="container">
<div class="title">
<span class="border"></span>
<span>Title</span>
<span class="border"></span>
</div>
</div>
CSS
#container {background: #eee; height: 100px; width: 100%;}
.title {margin: 0 auto; text-align: center; margin-top: 20px;}
.title span:nth-child(2) {padding: 0 10px;}
.border {display: inline-block; width: 40px; background: #000; height: 1px;}

Answer 1

I assume that you want the lines before and after a word, than why not use pseudo elements? You will need single element, no span and no other element to achieve that effect.
Demo
I've made the below example from scratch, here, am using :before and :after pseudo to create virtual elements, and then am positioning them accordingly using position: absolute; which is set to top: 50; for vertical centering, and then am deducting the width of each pseudo element so that it doesn't overlap your word.
div {
margin: 150px;
position: relative;
float: left;
}
div:before,
div:after {
content: "";
width: 50px;
position: absolute;
top: 50%;
height: 1px;
background: #f00;
}
div:before {
left: -50px;
}
div:after {
right: -50px;
}
As you commented, if you want the lines to expand fully from edge to edge.. than wrap the text in a span and make the changes as below in your CSS
Demo 2 (Expands 100%)
<div><span>Hello</span></div>
div {
text-align: center;
position: relative;
}
div span {
background: white;
position: relative;
z-index: 1;
}
div:before {
content: "";
width: 100%;
position: absolute;
top: 50%;
left: 0;
height: 1px;
background: #f00;
z-index: 0;
}