centering - background image & width auto

Question

I have a button that spans the full width of a screen:

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

I would like the text in the first paragraph tag to be centered, with its background image next to the text. The problem is when that first <p> is centered, the background image is not directly next to the text. It will appear at the far left of the button.

Here is the 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

you can try the following:

for the paragraph with the background "dot", add display:inline-block, to keep it centered so the background will snap to the left of the pararaph.

Then put a padding-left so the text won't be over the background image.

If you wish to have the dot before the centered text, add a additional negative margin-left, so the text itself will be at absolute center again.

Like this:

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;          
}

See the fiddle: http://jsfiddle.net/wrN9A/1/