Html 文本两侧的短行

使用CSS和HTML，在某些文本的任意一侧添加一行都有大量的答案，但这些行总是填满容器的整个宽度。我只希望这些行的长度为150px，在文本的任一侧，如下所示：

文本将是动态的，因此可能会改变长度，需要居中

下面是我一直在研究的一些JSFIDLE代码：

---

有人能帮助改进这段代码，使代码行如上图所示吗

您可以在这里使用

Flexbox

h2{
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本转换：大写；
}
h2:之后，h2:之前{
内容：''；
宽度：150px；
高度：2倍；
背景：红色；
利润率：0.10px；
}

---

Lorem ipsum

如果您不想使用

Flexbox

，您可以通过将

h1

设置为

内联块

，然后将

:before

-150px向左偏移，将

:before

设置为100%向左偏移

#容器{
宽度：800px；
文本对齐：居中；
背景色：#ccc；
保证金：0自动；
}
h1{
位置：相对位置；
字体大小：30px；
显示：内联块；
填充：0 15px；
}
h1:之前，h1:之后{
位置：绝对位置；
最高：50%；
宽度：150px；
高度：3倍；
内容：''；
背景色：红色；
左：-150px；
}
h1：之后{
左：100%；
}

文本标题

在这里，我将其包装在另一个DIV中，用于居中，并为标题增加了一点空间（示例中为a）：

文本标题
#容器{
宽度：800px；
文本对齐：居中；
背景色：#ccc；
}
h1{
位置：相对位置；
字体大小：30px；
z指数：1；
溢出：隐藏；
文本对齐：居中；
}
h1:之前，h1:之后{
保证金：0px 0px 0px 15px；
位置：绝对位置；
最高：51%；
溢出：隐藏；
宽度：50%；
高度：3倍；
内容：''；
背景色：红色；
}
h1：之前{
左边缘：-52%；
文本对齐：右对齐；
}

这里是另一种方法。我没有对它进行过很多测试，但它应该是跨浏览器的

#容器{
宽度：800px；
最大宽度：100%；
文本对齐：居中；
背景色：#ccc；
}
h1{
位置：相对位置；
字体大小：30px；
z指数：1；
溢出：隐藏；
文本对齐：居中；
}
h1:之前，h1:之后{
内容：''；
宽度：150px；
高度：3倍；
显示：内联块；
背景色：红色；
垂直对齐：0.3em；
利润率：0-100%；
}
h1：之前{
右边距：0.75em；
}
h1：之后{
左边距：0.75em；
}
}

文本标题

以固定宽度将容器包装在div中。

<div id="container">

#container {
width:800px;
text-align:center;
background-color:#ccc;
}
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 3px;
content: '';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}

<div align="center">
  <div id="container">
    <h1>TEXT HEADING</h1>
  </div>
</div>

#container {
  width:800px;
  text-align:center;
  background-color:#ccc;
}
h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    margin: 0px 0px 0px 15px;
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 3px;
    content: '';
    background-color: red;
}
h1:before {
    margin-left: -52%;
    text-align: right;
}