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

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/

编辑(09/2020)

显示:flex方法似乎是当今最可靠、最容易设置的方法。

写于3月17 '15 17:06:

对于后来(现在)的浏览器，display:flex和伪元素使得无需额外标记即可轻松绘制。

如果你需要花哨或难看的妆容，边框风格，盒影甚至背景也有助于化妆。 h1 {margin-top: 50 px; 显示:flex; 背景:线性渐变(向左、灰色、浅灰色,白色,黄色,绿色);; ｝ H1:前，H1:后{ 颜色:白色; 内容:”; flex: 1; 边界底部:槽2 px; 保证金:汽车0.25 em; /* ou 0 1px si border-style:ridge */ ｝ <h1>侧线通过flex</h1>

资源(2020年9月新增):

https://css-tricks.com/snippets/css/a-guide-to-flexbox/(参见这里使用的flex/flex-grow) https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/ (margin:auto 0.25em;此处使用)

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

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

以防有人想这样做，依我看，使用CSS的最佳解决方案是使用flexbox。

这里有一个例子:

.kw-dvp-HorizonalButton { color: #0078d7; display:flex; flex-wrap:nowrap; align-items:center; } .kw-dvp-HorizonalButton:before, .kw-dvp-HorizonalButton:after { background-color: #0078d7; content: ""; display: inline-block; float:left; height:1px; } .kw-dvp-HorizonalButton:before { order:1; flex-grow:1; margin-right:8px; } .kw-dvp-HorizonalButton:after { order: 3; flex-grow: 1; margin-left: 8px; } .kw-dvp-HorizonalButton * { order: 2; } <div class="kw-dvp-HorizonalButton"> <span>hello</span> </div>

这应该总是会产生一个完美的居中对齐的内容，左边和右边有一条线，线和内容之间有一个容易控制的边缘。

它在顶部控件之前和之后创建一个线元素，并在flex容器中将它们设置为顺序1,3，同时将内容设置为顺序2(进入中间)。 将前/后的值增加为1，可以使它们平等地占用最多的空白空间，同时保持内容的中心。

希望这能有所帮助!

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

我使用一个表格布局来动态填充边和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;
}