.hr-sect { 显示:flex; flex-basis: 100%; 对齐项目:中心; 颜色:rgba(0,0,0,0.35); Margin: 8px 0px; ｝ .hr-sect::, {后.hr-sect:: 内容:“”; flex-grow: 1; 背景:rgba(0,0,0,0.35); 身高:1 px; 字体大小:0 px; 行高:0 px; Margin: 0px 8px; ｝ < div class = " hr-sect " > < / div >文本

我使用一个表格布局来动态填充边和0高度，绝对位置div动态垂直定位:

没有硬编码的维度 没有图像 没有它 方面的背景 控制条外观

https://jsfiddle.net/eq5gz5xL/18/

我发现，稍微低于真中心的文字效果最好;这可以在55%的位置进行调整(身高越高，界限越低)。线条的外观可以改变边界底部的位置。

HTML:

<div class="title">
  <div class="title-row">
    <div class="bar-container">
      <div class="bar"></div>
    </div>
    <div class="text">
      Title
    </div>
    <div class="bar-container">
      <div class="bar"></div>
    </div>
  </div>
</div>

CSS:

.title{
  display: table;
  width: 100%
  background: linear-gradient(to right, white, lightgray);
}
.title-row{
  display: table-row;
}
.bar-container {
  display: table-cell;
  position: relative;
  width: 50%;
}
.bar {
  position: absolute;
  width: 100%;
  top: 55%;
  border-bottom: 1px solid black;
}
.text {
  display: table-cell;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 36px;
}

最短最佳方法:

跨度:之后, 跨度:{之前 内容:“\ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0”; 文字修饰:线穿过; ｝ <span>你的文本</span>

不是白费口舌，但我一直在寻找一个解决方案，最终来到这里，我自己对这些选项不满意，尤其是由于某种原因，我无法得到这里提供的解决方案。(可能是我的失误造成的…)但我一直在玩flexbox，这里有一些东西是我自己做的。

有些设置是硬连接的，但仅用于演示目的。我认为这个解决方案应该适用于任何现代浏览器。只需删除/调整.flex-parent类的固定设置，调整颜色/文本/内容，(我希望)你会像我一样喜欢这种方法。

HTML:

.flex-parent { 显示:flex; 宽度:300 px; 高度:20 px; 对齐项目:中心; ｝ .flex-child-edge { flex-grow: 2; 身高:1 px; background - color: # 000; 边框:1px #000固体; ｝ .flex-child-text { flex-basis:汽车; flex-grow: 0; 边框:0px 5px 0px 5px; text-align:中心; ｝ < div class = " flex-parent”> < div class = " flex-child-edge " > < / div > <div class="flex-child-text">我发现这更简单!< / div > < div class = " flex-child-edge " > < / div > < / div >

我还保存了我的解决方案: https://jsfiddle.net/Wellspring/wupj1y1a/1/

我认为最直接的方法是使用CSS网格。

h1 { 显示:网格; Grid-template-columns: 1fr auto 1fr; 差距:1快速眼动; ｝ h1::, {后h1:: 内容:“”; 顶部边缘:0.1雷姆重黑; align-self:中心; ｝ <标题>标题< h2 >

<div><span>text TEXT</span></div>

div { 
  height: 1px; 
  border-top: 1px solid black; 
  text-align: center; 
  position: relative; 
}
span { 
  position: relative; 
  top: -.7em; 
  background: white; 
  display: inline-block; 
}

为span设置padding，使文本和行之间有更多的空间。

例如:http://jsfiddle.net/tUGrf/