html - Bootstrap 按钮不居中

Question

我用 Bootstrap 构建了这个按钮，但它们没有居中。我会附上一张有问题的照片。我是 Bootstrap 的新手，因为我是自己编写 css 的。 buttons代码:

HTML/CSS

  .social {
  bottom: 0;
  left: 0;
  margin: 10px;
  position: absolute;
}

.fa-social {
  background: #2098f5;
  border: 0px solid #2098f5;
  color: rgb(255, 255, 255);
  height: 42px;
  line-height: 45px;
  text-align: center;
  width: 42px;
}

.fa-social:hover {
  color: #2098f5;

<div class="social">
  <a href="https://www.facebook.com"><i class="fa fa-facebook fa-2x fa-social"></i></a>
  <a href="https://www.twitter.com"><i class="fa fa-twitter fa-2x fa-social"></i></a>
  <a href="https://www.linkedin.com"><i class="fa fa-linkedin fa-2x fa-social"></i></a>
  <a href="https://www.plus.google.com"><i class="fa fa-google-plus fa-2x fa-social"></i></a>
</div>

Answer 1

简单地将 btn 类添加到您的 anchor(a) 标签中，如下所示

        <div class="social">
            <a href="https://www.facebook.com" class="btn btn-primary"><i class="icon-facebook fa-2x fa-social"></i></a>
            <a href="https://www.twitter.com" class="btn btn-primary"><i class="icon-twitter fa-2x fa-social"></i></a>
            <a href="https://www.linkedin.com" class="btn btn-primary"><i class="icon-linkedin fa-2x fa-social"></i></a>
            <a href="https://www.plus.google.com" class="btn btn-primary"><i class="icon-google-plus fa-2x fa-social"></i></a>
        </div>

Note: Here i have also used btn-primary for just color you can skip or set default.