带有背景的中心文本从左侧的文本延伸到右侧的内容框

Question

我被要求在某些居中的文字上编码一个不寻常的形状背景。

文本应居中，并将其背景延伸到内容框的右边缘。

如何使用CSS执行此操作？

Answer 1

http://jsfiddle.net/7U688/

文本居中是蛋糕。 棘手的一点是将背景延伸到一个方向。 这是实现这一目标的一种方式：

#outer{
    border:2px solid black;
    background-color:red;
    overflow:hidden;
}
#inner{
    margin:40px;
    text-align:center;
}
p{
    display:inline-block;
    color:white;
    background-color:black;  // or an image
    margin:0 -999em 0 5px;
    padding: 5px 999em 5px 5px;
    line-height:1;
}

在这种情况下 - 我使用巨大的填充和同样巨大的负边距来保持元素流动，但在视觉上延伸到其边界之外。这种技术的一个好处是它允许开发人员将元素保持在正常的静态或相对位置。

最后，在父元素中使用overflow:hidden以防止不必要的出血。

Answer 2

使用:after，您可以执行THIS之类的操作。

这允许文本正常居中而不使用边距和填充黑客。

p {
    display: table;
    background: black;
    margin: auto;
    color: white;
    position: relative;
    font-size: 1em;
}

p:after {
    content: '';
    background: black;
    width: 150px;
    line-height: 1em;
    height: 100%;
    display: inline-block;
    position: absolute;
}

Answer 3

这是你想要的吗？ Fiddle

HTML：

<div class="wrapper">
    <span class="text">You text</span>
</div>

的CSS：

.wrapper {
   width: 200px;
    height: 200px;
    border: 1px solid;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

.text {
    background: yellow;

}