Question

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

我想要做的是使文本“带边框的文字”居中于父div的内部（我想在本文的任一侧保留双线边框，以便最终结果将是这样的：==========带边框的文字==========。边框悬挂在父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%;
}

否则，背景图像/渐变也会这样做。

CSS-使子文本比父容器更宽

1 个答案: