[FIXED] How to vertically center an HR element

Issue

How do I vertically center an hr element?

I've tried to place the element in some div elements...

<div class="table">
    <div class="table-cell"><hr /></div>
</div>
<div class="table">
    <div class="table-cell">Some text Here!</div>
</div>
<div class="table">
    <div class="table-cell"><hr /></div>
</div>

I've left out that I am using bootstrap and have these three div elements with the class of table in the same row using the col-size-number format.

---

So I'm looking for inline HR element Some Text inline HR element

--------------SOME TEXT--------------

Thank you again css guru masters!

Solution

To anyone who's stumbled upon this in the future, I have updated the answer to what I feel is a more modern, efficient approach using Flexbox

HTML:

<div class="title">
  <hr />
  <h3>Some text</h3>
  <hr />
</div>

CSS:

.title {
  display:flex;
  flex-flow:row;
  justify-content:center;
  align-items:center;
}
hr {
  flex:1;
}
h3 {
   padding:0px 48px;
}

DEMO HERE

Answered By - RCNeil

Answer Checked By - Terry (PHPFixing Volunteer)