Question

下面的嘿家伙是我的引导程序中我的页脚的社交图标部分的代码

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

图标在常规尺寸页面上看起来很棒，但在bootsrap响应页面上，图标向左移动。请帮我中心对齐。

感谢。

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

Answer 2

试试这个：

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

和css：

.social-icons {
    text-align:center;
}

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

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

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

jsfiddle demo here

当bootstrap响应时，居中对齐社交图标div

2 个答案: