Question

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

<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/

Answer 1

您可以尝试以下方法：

对于带有背景“dot”的段落，添加display:inline-block，使其保持居中，以便背景将捕捉到pararaph的左侧。

然后放一个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/

Answer 2

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

background-position: 11em 0;

更灵活的解决方案是使用CSS generated content - 你可以在你想要的地方添加一个元素，然后设置它的样式 - 特别是如果你的彩色点真的是内容而不是<强>定型

居中 - 背景图像＆amp;宽度自动

2 个答案: