0

我有一个横跨整个屏幕宽度的按钮：

<button class="btn btn-default"> 
  <div class="center-copy">
    <p class="answer-copy-1">accusantium quia sunt</p>
    <p class="question-results">44%</p> 
  </div>     
</button>

我希望第一个段落标签中的文本居中，其背景图像位于文本旁边。问题是当第一个<p>居中时，背景图像并不直接靠近文本。它将出现在按钮的最左侧。

这是CSS：

.btn-default {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    color: #333333;
}

.center-copy{
    text-align: center;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
}

p.answer-copy-1{
    background-image: url("http://demo.omnigon.com/christian_bovine/greg/imgs/dots.png");
    background-position: 0 0;
    background-repeat: no-repeat;
}

.question-results{
    width: 100%;
    float: left;
    overflow: hidden;
}

JSFiddle：http: //jsfiddle.net/xtian/wrN9A/

4

2 回答 2

0

您可以尝试以下方法：

对于具有背景“点”的段落，添加display:inline-block, 以使其居中，以便背景将捕捉到段落的左侧。

然后放一个padding-left，这样文本就不会出现在背景图像上。

如果您希望在居中文本之前添加点，请添加一个额外的负数margin-left，这样文本本身将再次处于绝对中心。

像这样：

p.answer-copy-1 {
    display:inline-block;
    background: url("http://demo.omnigon.com/christian_bovine/greg/imgs/dots.png") left top no-repeat;
    padding-left:15px;
    margin-left:-15px;          
}

见小提琴：http: //jsfiddle.net/wrN9A/1/

于 2013-08-08T18:58:28.167 回答
0

您的背景图像与段落的左侧对齐，这是其父级宽度的 100%。这就是为什么点出现在文本的最左侧的原因。您可以尝试调整背景图像的起始位置。前任：

background-position: 11em 0;

一个更灵活的解决方案是使用CSS 生成的内容——你可以在你想要的地方添加一个元素，并设置它的样式——特别是如果你的彩色点是真正的内容而不是样式。

于 2013-08-08T19:00:07.293 回答