How to center a block of social icon background images?

Question

I'm trying to center a block of social icons into the center of the screen when my website is in mobile browser size. My html is:

<div id="header-tel-no">Tel: 123456789</div>

<div id="social-buttons-header">
<p><a class="social-button sb-linkedin" href="http://www.linkedin.com/sample" target="_blank">Linkedin</a></p>

<p><a class="social-button sb-twitter" href="https://twitter.com/sample" target="_blank">Twitter</a></p>

<p><a class="social-button sb-facebook" href="https://www.facebook.com/sample" target="_blank">Facebook</a></p>

<p><a class="social-button sb-email" href="mailto:[email protected]">Email</a></p>
</div>

My CSS is: -

#social-buttons-header{

    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;

}

.social-button{

    width: 30px;
    height: 30px;
    text-indent: -999em;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    margin-right: 2px;
    text-decoration: none;
    border: 1px solid #FFFFFF;
}

a.social-button:hover,
.social-button a:hover,
a.social-button:hover:after,
.social-button a:hover:after {

    text-decoration: none;
    border: 1px solid #FF9933;
}


a.social-button.sb-facebook,
.social-button a.sb-facebook {
  background: transparent url(images/facebook.png) no-repeat;

}

a.social-button.sb-twitter,
.social-button a.sb-twitter {
  background: transparent url(images/twitter.png) no-repeat;

}

a.social-button.sb-linkedin,
.social-button a.sb-linkedin {
  background: transparent url(images/linkedin.png) no-repeat;

}

a.social-button.sb-email,
.social-button a.sb-email {
  background: transparent url(images/outlook.png) no-repeat;

}

The social icons appear on the right like this...

.................[x][x][x][x]

i want them as ...

........[x][x][x][x] .........

(i have used the above brackets and x's as I cant upload a pic yet, as my score is not high enough)

Can anyone advise how I can get them into the center please ?

Answer 1

With the provided code - Update p tags to display inline-block and center the content of the header

http://jsfiddle.net/vc3tkdq7/

p {
    display: inline-block;
}

#social-buttons-header{
    text-align: center;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;    
}

To remove the text

http://jsfiddle.net/xten2c47/1/

I used text-indent: 999999px;