Html 创建垂直居中的水平线，在CSS中用填充填充填充标题的宽度

我基本上需要创建一个标题，该标题有一条垂直居中的水平线，填充宽度（左和右），但同时也支持同一行上的多个文本元素，例如，形成如下形式：

<div class="content">
  <div class="line"></div>
  <div class="line-text">Some</div>
  <div class="line-gap"></div>
  <div class="line-text">Text</div>
  <div class="line-gap"></div>
  <div class="line-text">In a Line</div>
  <div class="line"></div>
</div>

----α-β-γ---

这就是我到目前为止所做的：

在这里，我的演示运行良好，但它需要一个背景来工作，这不是一个好的解决方案，因为我的网站上的背景不是静态的单一颜色（它是一个固定的图片，滚动时不会移动）

因此，我需要做的是基本上修复第一个版本，使其与第二个版本一样工作，但不使用背景

我想做一些事情，比如：

<div class="content">
  <div class="line"></div>
  <div class="line-text">Some</div>
  <div class="line-gap"></div>
  <div class="line-text">Text</div>
  <div class="line-gap"></div>
  <div class="line-text">In a Line</div>
  <div class="line"></div>
</div>

一些
正文
排成一行

其中，.line将是一个自动宽度（用于填充左侧和右侧），而.line gap将是10px，用于显示文本之间的行

编辑/更新

这里是另一个演示，但我更喜欢一些更自动的东西，而不是试图完全设置位置，因为这是一个响应流体设计

---

如果您不想使用背景，可以使用

：before

和

：after

属性进行一些小操作

下面是一个示例，您可以将内容/属性更改为您喜欢的任何内容，它会按照您的要求执行

下面的例子

HTML:

<ul>
<li class="sub-menu-item" ><a href="#">Example</a></li>
<li class="sub-menu-item" ><a href="#">Example</a></li>
</ul>

li.sub-menu-item:before,  li.sub-menu-item:after {
    content: "\2014 \2014"
}

li { 
    display:inline-block;
} 

---

为什么不在所有元素上使用相对定位？@user125697添加了一个带有虚线的代码变体：我不想对每个文本元素使用left:XX，因为我将对每个文本使用相同的元素（即所有class=“line text”而不是“text1”“text”）。而且文本元素也没有背景。我的第一个示例使用：before和：after元素，但它们不像第二个示例那样展开和填充。第二个例子正是我想要实现的，但不必在文本上添加背景（并且要保持它为实线，很抱歉，我的纯文本示例有误导性）@dan2k3k4我不明白这个问题-你所要做的就是改变里面的内容：得到你想要的-我没有使用背景或任何东西-这不是我想要的。该行应该扩展到容器的100%宽度（因此它对不同的屏幕/移动设备做出响应），并且在每个单词（或真实用户案例中的字母）前后都有一些间隙/填充。我的原始解决方案：-工作正常，但需要设置背景。其他人，我还没有找到一种方法让他们一路扩张。