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>

我遗漏了我正在使用bootstrap并使用col-size-number格式将这三个div元素与同一行中的class表格放在一起。

所以我正在寻找内联HR元素Some Text inline HR元素

--------------一些文章--------------

再次感谢css guru masters！

Answer 1

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

Answer 2

<hr />标记应垂直对齐，就像使用<{p>} <div>中正确使用的任何其他元素一样

display:table-cell;vertical-align:middle;

在你的CSS中

。

.table {
   display:table;
   width:100%; height:100%;
   position:absolute;
}

.table-cell {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   width:auto;
   height:auto;
}

<强> DEMO

Answer 3

以一种简单的通用方式将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>

如何垂直居中HR元素

3 个答案: