使用Flexbox的简单方法

# title-wrapper { 显示:flex; 对齐项目:中心; ｝ .title { flex-wrap:包装; Margin: 0 10px 0 10px; text-align:中心; ｝ .line { flex: 1; 身高:1 px; 背景颜色:黑色; ｝ <节id =“title-wrapper”> < div class = '行' > < / div > <div class='title'>some text</div> < div class = '行' > < / div > < / >节

在尝试了不同的解决方案后，我有一个有效的不同的文本宽度，任何可能的背景，没有添加额外的标记。

h1 { 溢出:隐藏; text-align:中心; ｝ h1:之前, h1:{后 background - color: # 000; 内容:“”; 显示:inline-block; 身高:1 px; 位置:相对; vertical-align:中间; 宽度:50%; ｝ h1:{之前 右:0.5 em; margin-left: -50%; ｝ h1:{后 左:0.5 em; margin-right: -50%; ｝ <标题>标题< / h1 > <h1>这是一个较长的标题</h1>

我在IE8、IE9、Firefox和Chrome浏览器上进行了测试。你可以在这里查看http://jsfiddle.net/Puigcerber/vLwDf/1/

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

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

使用Bootstrap 4预定义类

<div class="row align-items-center">
  <div class="col dropdown-divider"></div>
  <div class="col-auto">OR</div>
  <div class="col dropdown-divider"></div>
</div>

这为您提供了固定的线条长度，但效果很好。 行长可以通过添加或取'\00a0' (unicode空格)来控制。

H1:前，H1:后{ 内容:“\ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0 '; 文字修饰:线穿过; 保证金:自动0.5em; } <标题>边线h1 > < /

最短最佳方法:

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