How to vertically center an HR element

Question

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!

Phillipp

why do you want a horizontal rule in your table cell with no content? What are you trying to do? – Platon

Consider using border instead. hr is not for visual styling, and is harder to work with. – Wardwarde

For those editing my question, do not edit the line "So I'm looking for inline HR element Some Text inline HR element" your edits do not reflect what was being asked. – Phillipp

The question asked says how to vertically center an HR element, but this is how to center text within a horizontal HR element. – Prognostic

Answer 1

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

Dyaus

thanks for the answer, but i guess i was unclear, i'll update my question as well, I would like the HR tags to be at the sides of the text, vertically in the middle – Phillipp

Hey i just got it working rearranging your code jsfiddle.net/Rf467/1 thanks a bunch! – Phillipp

Jemiloii found the answer rearranging the code, but the code in this post is not the answer, check Jacquen post or jemiloii comment link to get a correct answer. – Matheny

Answer 2

For a simple, generic way to vertically center an hr element:

html:

<div class="container">
  <hr />
</div>

css:

.container {
    display: flex;
    align-items: center;
}

.container hr {
    width: 100%;
}

The hr element needs a width given to it (or flex-grow), otherwise it will be only a dot in the center of the container.

.container {
  display: flex;
  align-items: center;

  height: 100px;
  background: yellow;
}

.container hr {
  flex-grow: 1;
}

<div class="container">
  <hr />
</div>

Kent

Thanks. This answers the short form of the question although it appears they were meaning to ask something else. – Prognostic

Answer 3

I used the following solution in my css, margin the element to the center on every device CSS: margin: 0 auto;

Proteinase

That achieves horizontal centering, not vertical. – Kent