CSS-居中的孩子比文字父容器更寬

Question

Here's a JSfiddle of what I have so far.

我想要做的就是讓這個文本「文字加邊框」是父div中居中（我想保持林立的雙邊界在這個文本的任何一邊，以便最終的結果是這樣的：==========帶邊框的文本==========。 ）

我想這樣做，使這個解決方案適用於不同大小的容器和不同數量的文本。

我發現了幾個類似於這個問題的問題，關於將較寬的孩子集中在較窄的父母身邊，但由於某些原因，我無法讓他們使用本文。

CSS：

#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; 
} 

HTML：

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

感謝您的幫助，

Answer 1

你可以使用負利潤率和溢出。

負餘量幾乎減少寬度，由僞元素需要下降到零空間，： http://jsfiddle.net/35waA/3/

#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%; 
} 

否則，背景圖像/梯度將做太多。