Html CSS-居中的子文本比父容器宽

我想做的是使文本“带边框的文本”位于父div的中心（我想在文本的任一侧保留双线边框，以便最终结果如下所示：======================================================带边框的文本================边框悬挂在父div的任一侧。）

我想让这个解决方案能够处理不同大小、不同文本量的容器

我发现了一些与此类似的问题，关于在狭隘的父母中集中宽大的孩子，但出于某种原因，我无法让他们使用本文

CSS:

HTML:

带边框的文本

---

感谢您的帮助，

您可以使用负边距和溢出

负边距实际上减少了宽度，伪元素所需的空间降至零：

---

否则，背景图像/渐变也可以。

你看起来像这样吗？谢谢，但不完全是。我想把边框和文字保持在一行。@KingKing确实是这样，因为空格使它保持在一行：）谢谢！这确实很好，但是如果边框之间只有少量的文本（比如一个字符），那么边框的长度就不足以填充剩余的宽度。有什么想法吗？给他们至少一半宽度的父母（不是在%的原因是它需要然后宽度的跨度）。容器是400px，最小值是：200px，负边距的值相同。好的，所以我更新了op中的原始小提琴，出于某种原因，似乎将它们设置为100%可以减少文本量。我真的不知道为什么会这样，也不知道发生了什么。@user2839712刚刚说：），因为如果你用%来设置宽度，它以跨度的宽度作为参考，越长的是文本，越长的是伪文本，使用静态宽度代替，至少是容器宽度的一半：）

#container {
width:400px;
background:pink;
margin:0 auto;
padding: 10px 0;
}

.border {
display:block;
background:yellow;
}

.border span {
left:0;right:0;
white-space:nowrap;
margin: auto;
}

p.border span:after, p.border span:before {
content: " ";
display: inline-block;
width:100%;
height:5px;
border:solid gray;
border-width:1px 0;
}

<div id="container">
<p class="border">
    <span>Text With a Border</span>
</p>
</div>

#container {
    width:400px;
    background:pink;
    margin:0 auto;
    padding: 10px 0;
}
.border {
    display:block;
    background:yellow;
    text-align:center;
    overflow:hidden;
}
.border span {
    white-space:nowrap;
    margin: 0;
    display:inline-block;
}
p.border span:after, p.border span:before {
    content:" ";
    display: inline-block;
    width:200%;
    height:5px;
    border:solid gray;
    border-width:1px 0;
}
p.border span:before {
    margin-left:-200%;
}
p.border span:after {
    margin-right:-200%;
}