如何垂直对人力资源元素

Question

如何垂直对齐hr元素？

我试着把这个元素放到一些div元素中.

<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>

我忽略了使用引导程序，而是使用col数字格式将这三个div元素与表的class放在了同一行。

所以我在找内联HR元素，一些文本内联HR元素

-一些文字

再次感谢css大师！

Answer 1

对于将来偶然发现这个问题的人，我已经更新了我认为使用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;
}

这里的演示

Answer 2

对于垂直对hr元素进行垂直居中的简单通用方法：

html：

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

css：

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

.container hr {
    width: 100%;
}

hr元素需要给它一个width (或flex-grow)，否则它将仅仅是容器中心的一个点。

​

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

  height: 100px;
  background: yellow;
}

.container hr {
  flex-grow: 1;
}

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

​

Answer 3

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