html - Bootstrap 响应时居中对齐社交图标 div

Question

大家好，下面是我在 bootstrap 中用于页脚社交图标部分的代码

html

<div class="row ">
       <div class="col-md-3 col-md-offset-5 ">  
                <a href="#" target="_blank"><div class="facebook-roll social-roll"></div></a> 
                <a href="#" target="_blank"><div class="twitter-roll social-roll"></div></a> 
                <a href="#" target="_blank"><div class="email-roll social-roll"></div></a> 
                <a href="#" target="_blank"><div class="googleplus-roll social-roll"></div></a> 
         </div>
</div>

示例 CSS

.googleplus-roll{
background-image: url('images/googleplus.png');
}

.googleplus-roll:hover {
background-image: url('images/googleplushov.png');
}


.social-roll {
height: 30px;
width: 30px;
margin: 10px;
float: left;
border-radius: 50%;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}

.social-roll:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

这些图标在常规大小的页面上看起来很棒，但在 Bootstrap 响应页面上，图标会向左移动。请帮我居中对齐。

谢谢。

Answer 1

尝试使用这个 -

<div class="row ">
   <div class="col-md-3 col-md-offset-5 text-center ">  
            <a class="inline_block" href="#" target="_blank"><div class="facebook-roll social-roll"></div></a> 
            <a class="inline_block" href="#" target="_blank"><div class="twitter-roll social-roll"></div></a> 
            <a class="inline_block" href="#" target="_blank"><div class="email-roll social-roll"></div></a> 
            <a class="inline_block" href="#" target="_blank"><div class="googleplus-roll social-roll"></div></a> 
     </div>
</div>

和这个CSS

.inline_block{
display: inline-block;;
}

.social-roll {
height: 30px;
width: 30px;
margin: 10px;
border-radius: 50%;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
  border: 1px solid red;
}

这是一个 Codepen 示例 - http://codepen.io/anon/pen/zKmJE