如何垂直居中 HR 元素

Posted 2023-03-05

【中文标题】如何垂直居中 HR 元素

【英文标题】：How to vertically center an HR element

【发布时间】：2014-04-05 09:26:26

【问题描述】：

如何使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-size-number 格式将这三个 div 元素与表的 class 放在同一行中。

---

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

--------------一些文字--------------

再次感谢各位css大师！

【问题讨论】：

为什么要在表格单元格中使用没有内容的水平线？你想做什么？

考虑改用边框。 hr 不适用于视觉样式，并且更难使用。

对于那些编辑我的问题的人，不要编辑“所以我正在寻找内联 HR 元素一些文本内联 HR 元素”行，您的编辑不反映所询问的内容。

【参考方案1】：

对于将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>

【参考方案2】：

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

【讨论】：

实现水平居中，而不是垂直居中。

【参考方案3】：

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

【讨论】：

感谢您的回答，但我想我不清楚，我也会更新我的问题，我希望 HR 标签位于文本的两侧，垂直位于中间跨度>

嘿，我刚刚开始重新排列您的代码jsfiddle.net/Rf467/1，非常感谢！

Jemiloii 重新排列代码找到了答案，但本帖中的代码不是答案，请查看 Jacquen 帖子或 jemiloii 评论链接以获得正确答案。