社交媒体按钮上的Bootstrap居中图标

时间：2017-08-02 13:45:03

标签： html css twitter-bootstrap

我有一些使用bootstraps font-awesome图标的社交媒体图标。我的问题是图标不居中。

icons

这是我的代码，其中大部分是从在线资源中复制和粘贴的。

#HTML
 <!-- Add font awesome icons -->
<div class="social-btns">
   <a class="btn facebook" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
   <a class="btn google" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
   <a class="btn linkedin" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
   <a class="btn instagram" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
   <a class="btn flickr" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a>
   <a class="btn github" href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>

#CSS
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
          transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
  top: 90%;
  left: -110%;
}
.social-btns .btn .fa {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.social-btns .btn.facebook:before {
  background-color: #3b5998;
}
.social-btns .btn.facebook .fa {
  color: #3b5998;
}
.social-btns .btn.instagram:before {
  background-color: sandybrown;
}
.social-btns .btn.instagram .fa {
  color: sandybrown;
}
.social-btns .btn.google:before {
  background-color: #dc4a38;
}
.social-btns .btn.google .fa {
  color: #dc4a38;
}
.social-btns .btn.flickr:before {
  background-color: hotpink;
}
.social-btns .btn.flickr .fa {
  color: hotpink;
}
.social-btns .btn.github:before {
  background-color: black;
}
.social-btns .btn.github .fa {
  color: black;
}
.social-btns .btn.linkedin:before {
  background-color: royalblue;
}
.social-btns .btn.linkedin .fa {
  color: royalblue;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
  top: -10%;
  left: -10%;
}
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
  color: #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.social-btns {
  margin: auto;
  font-size: 0;
  text-align: center;
  position: inherit;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.social-btns .btn {
  display: inline-block;
  background-color: #fff;
  width: 5em;
  height: 5em;
  margin: 0 10px;
  text-align: left;
    vertical-align: middle;
    line-height: 50%;
  position: relative;
  overflow: hidden;
  border-radius: 28%;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
  opacity: 0.99;

}
.social-btns .btn:before {
  content: '';
  width: 120%;
  height: 120%;
  position: absolute;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.social-btns .btn .fa {
  font-size: 2.5em;
  vertical-align: middle;
}

我也希望它也适用于移动设备。我已经玩了一些边缘和文本对齐，但似乎没有任何工作符合要求。任何帮助表示赞赏。

5 个答案:

答案 0 :(得分：2)

您只需添加.social-btns .btn{padding: 18px 18px;}

即可 

.social-btns .btn{padding: 18px 18px;}

.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
          transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
  top: 90%;
  left: -110%;
}
.social-btns .btn .fa {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.social-btns .btn.facebook:before {
  background-color: #3b5998;
}
.social-btns .btn.facebook .fa {
  color: #3b5998;
}
.social-btns .btn.instagram:before {
  background-color: sandybrown;
}
.social-btns .btn.instagram .fa {
  color: sandybrown;
}
.social-btns .btn.google:before {
  background-color: #dc4a38;
}
.social-btns .btn.google .fa {
  color: #dc4a38;
}
.social-btns .btn.flickr:before {
  background-color: hotpink;
}
.social-btns .btn.flickr .fa {
  color: hotpink;
}
.social-btns .btn.github:before {
  background-color: black;
}
.social-btns .btn.github .fa {
  color: black;
}
.social-btns .btn.linkedin:before {
  background-color: royalblue;
}
.social-btns .btn.linkedin .fa {
  color: royalblue;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
  top: -10%;
  left: -10%;
}
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
  color: #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.social-btns {
  margin: auto;
  font-size: 0;
  text-align: center;
  position: inherit;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.social-btns .btn {
  display: inline-block;
  background-color: #fff;
  width: 5em;
  height: 5em;
  margin: 0 10px;
  text-align: left;
    vertical-align: middle;
    line-height: 50%;
  position: relative;
  overflow: hidden;
  border-radius: 28%;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
  opacity: 0.99;

}
.social-btns .btn:before {
  content: '';
  width: 120%;
  height: 120%;
  position: absolute;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.social-btns .btn .fa {
  font-size: 2.5em;
  vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Add font awesome icons -->
<div class="social-btns">
   <a class="btn facebook" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
   <a class="btn google" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
   <a class="btn linkedin" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
   <a class="btn instagram" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
   <a class="btn flickr" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a>
   <a class="btn github" href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>

`

答案 1 :(得分：0)

使用此HTML代码：

<div class="social-btns">
   <a class="btn facebook text-xs-center" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
   <a class="btn google text-xs-center" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
   <a class="btn linkedin text-xs-center" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
   <a class="btn instagram text-xs-center" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
   <a class="btn flickr text-xs-center" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a>
   <a class="btn github text-xs-center" href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>

答案 2 :(得分：0)

使用.social-btns的柔印箱和.btn对齐并完美居中。

＆＃13;
＆＃13; 
.social-btns .btn {
  padding: 18px 18px;
}

.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}

.social-btns .btn:before {
  top: 90%;
  left: -110%;
}

.social-btns .btn .fa {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

.social-btns .btn.facebook:before {
  background-color: #3b5998;
}

.social-btns .btn.facebook .fa {
  color: #3b5998;
}

.social-btns .btn.instagram:before {
  background-color: sandybrown;
}

.social-btns .btn.instagram .fa {
  color: sandybrown;
}

.social-btns .btn.google:before {
  background-color: #dc4a38;
}

.social-btns .btn.google .fa {
  color: #dc4a38;
}

.social-btns .btn.flickr:before {
  background-color: hotpink;
}

.social-btns .btn.flickr .fa {
  color: hotpink;
}

.social-btns .btn.github:before {
  background-color: black;
}

.social-btns .btn.github .fa {
  color: black;
}

.social-btns .btn.linkedin:before {
  background-color: royalblue;
}

.social-btns .btn.linkedin .fa {
  color: royalblue;
}

.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
  top: -10%;
  left: -10%;
}

.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
  color: #fff;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.social-btns {
  margin: auto;
  font-size: 0;
  /* text-align: center; */
  /* position: inherit; */
  /* top: 0; */
  /* bottom: 0; */
  /* left: 0; */
  /* right: 0; */
  display: flex;
}

.social-btns .btn {
  display: flex;
  background-color: #fff;
  width: 5em;
  height: 5em;
  margin: 0 10px;
  /* text-align: left; */
  /* vertical-align: middle; */
  /* line-height: 50%; */
  position: relative;
  overflow: hidden;
  border-radius: 28%;
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1);
  opacity: 0.99;
  align-items: center;
  justify-content: center;
}

.social-btns .btn:before {
  content: '';
  width: 120%;
  height: 120%;
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.social-btns .btn .fa {
  font-size: 2.5em;
  vertical-align: middle;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="social-btns">
  <a class="btn facebook" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
  <a class="btn google" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
  <a class="btn linkedin" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
  <a class="btn instagram" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
  <a class="btn flickr" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a>
  <a class="btn github" href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您可以使用line-height属性和text-align属性。将这些规则添加到您的CSS中。

.social-btns .btn{
 text-align:center;
  line-height:4.2em;
  box-sizing:border-box;
}

Link for reference

希望这会有所帮助..

答案 4 :(得分：0)

你可以使用下面的代码，在a元素上使用text-align center，并将line hight设置为你的font-awsome图标，如果高度改变，你应该设置媒体查询来改变行高：

.social-btns .btn {
  text-align:center;
}

.social-btns .fa {
  line-height:60px;
}

以下代码段：

＆＃13;
＆＃13; 
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
          transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
  top: 90%;
  left: -110%;
}
.social-btns .btn .fa {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  
}
.social-btns .btn.facebook:before {
  background-color: #3b5998;
}
.social-btns .btn.facebook .fa {
  color: #3b5998;
}
.social-btns .btn.instagram:before {
  background-color: sandybrown;
}
.social-btns .btn.instagram .fa {
  color: sandybrown;
}
.social-btns .btn.google:before {
  background-color: #dc4a38;
}
.social-btns .btn.google .fa {
  color: #dc4a38;
}
.social-btns .btn.flickr:before {
  background-color: hotpink;
}
.social-btns .btn.flickr .fa {
  color: hotpink;
}
.social-btns .btn.github:before {
  background-color: black;
}
.social-btns .btn.github .fa {
  color: black;
}
.social-btns .btn.linkedin:before {
  background-color: royalblue;
}
.social-btns .btn.linkedin .fa {
  color: royalblue;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
  top: -10%;
  left: -10%;
}
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
  color: #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.social-btns {
  margin: auto;
  font-size: 0;
  text-align: center;
  position: inherit;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.social-btns .btn {
  display: inline-block;
  background-color: #fff;
  width: 5em;
  height: 5em;
  margin: 0 10px;
  text-align: left;
    vertical-align: middle;
    line-height: 50%;
  position: relative;
  overflow: hidden;
  border-radius: 28%;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
  opacity: 0.99;

}
.social-btns .btn:before {
  content: '';
  width: 120%;
  height: 120%;
  position: absolute;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.social-btns .btn .fa {
  font-size: 2.5em;
  vertical-align: middle;
}

.social-btns .btn {
  text-align:center;
}

.social-btns .fa {
  line-height:60px;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

 <!-- Add font awesome icons -->
<div class="social-btns">
   <a class="btn facebook" href="#"><i class="fa fa-facebook " aria-hidden="true"></i></a>
   <a class="btn google" href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
   <a class="btn linkedin" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
   <a class="btn instagram" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
   <a class="btn flickr" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a>
   <a class="btn github" href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题