html - 居中 - 背景图像和宽度自动

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

您可以尝试以下方法:

对于背景为“点”的段落，添加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;          
}

参见 fiddle :http://jsfiddle.net/wrN9A/1/