中心社交栏html＆amp; CSS

Question

我想创建一个居中的社交栏，这里是代码：

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>

，结果如下：

Answer 1

我认为您可以解决固定宽度padding: 0和margin: 0 auto

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

您可以更改宽度以适合图标... 删除float: center属性，它不存在...

Answer 2

将图标包裹在不受背景图像影响的div中：

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

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

并将新div设置为＆＃34; center＆＃34;

#centeringdiv {
 margin: 0 auto;
 }