如何垂直居中 HR 元素

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!

Answer 1

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>

Answer 2

我在我的 css 中使用了以下解决方案，在每个设备CSS上将元素边距居中： margin: 0 auto;

Answer 3

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