centered social bar html & css

Question

I wanted to create a centered social bar, here the code:

HTML&CSS:

.social-detail {
	color:#fff; 
    font-family: ProximaNovabold;
}
.icon-social {
    height: 50px;
    width: 208px;
	background: url(../../images/contact.png) center center no-repeat;
	float: left;
}
#social {
    padding: 0px 0px 2px 0px;
    float: center;
}
#social li {
    height: 42px;
    padding: 2px 0px;
    float: left;
}
#social .social-icon {
    float: left;
    cursor: pointer;
}
.social-info {
    font-size: 14px;
    color: #fff;
    line-height: 36px;
    padding-left: 50px;
    padding-right: 10px;
    width: 198px;
    text-align: left;
    font-family: ProximaNovabold;
}

					<div class="social">
						     <ul id="social">
                                <li>
                                                <div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/phone.png" title="" alt=""></div>
                                                <div class="social-info">
                                 
                                  <div class="social-detail">+123 456 789</div>
                                                </div>
                                </li>
                                <li>
                                    <div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/bbm.png" title="" alt=""></div>
                                                <div class="social-info">
                                
                                <div class="social-detail">1A2B3C4D</div>
                                                </div>
                                </li>
                                   <li>
                                                <div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/yahoo.png" title="" alt=""></div>
                                                <div class="social-info">
                                 
                                  <div class="social-detail">rakensu</div>
                                                </div>
                                </li>
                                
                                <li>
                                                <div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/skypee.png" title="" alt=""></div>
                                                <div class="social-info">
                                 
                                  <div class="social-detail">rakensu</div>
                                                </div>
                                </li>
                                      <li>
                                                <div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/facebook.png" title="" alt=""></div>
                                                <div class="social-info">
                                                        <div class="social-detail">rakensu</div>
                                                </div>
                                            </li>
                             </ul>
					</div>

and here the result:

Answer 1

I think you can solve giving a fixed width, padding: 0 and margin: 0 auto

ul#social {
    width: 1000px;
    padding: 0;
    margin: 0 auto
}

you can change the width to fit the icons... delete the float: center property, it doesn't exist...

Answer 2

Wrap your icons in a div thats is not affected by your background image:

<div class="social">
  <div id="centeringdiv">
    <ul id="social">

    </ul>
  </div>
</div>

and set that new div to "center"

#centeringdiv {
 margin: 0 auto;
 }