Bootstrap页脚：麻烦中心社交媒体图标

Question

我一直试图将社交媒体图标集中一个多小时，我似乎无处可去。 以下是HTML代码段。

＆＃13;

＆＃13;

<footer>
  <div class="container">
    <div class="row-footer">
      <div class="row row-content">
        <div class="nav navbar-nav" style="padding: 40px 10px;">
          <a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
          <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
          <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
          <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
          <a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
          <a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
        </div>
      </div>
    </div>
  </div>
</footer>

＆＃13;

＆＃13;

＆＃13;

以下是CSS代码段。

＆＃13;

＆＃13;

.row-footer {
    background-color: #AfAfAf;
    margin:200px auto;
    padding: 20px 0px 20px 0px;
}

.navbar-nav {
  display: inline-block;
  text-align: center;
}

＆＃13;

＆＃13;

＆＃13;

这就是它在Google Chrome上的显示方式。

Answer 1

尝试在图标容器上与display: inline-block;结合使用的图标上使用text-align:center。

如果有更多的孩子而不仅仅是图标，请考虑将其包装到另一个<div>。

a {
  display: inline-block;
}
.navbar-nav {
  text-align: center;
}

以下是已更新 jsfiddle

Answer 2

由于您正在使用navbar-nav课程，因此您必须删除它的默认float:left规则。

.navbar-nav {
  padding: 40px 10px;
  float: none;
  text-align: center;
}

工作示例1：

＆＃13;

＆＃13;

.row-footer {
  background-color: #AfAfAf;
  margin: 200px auto;
  padding: 20px 0px 20px 0px;
}
div.navbar-nav {
  padding: 40px 10px;
  float: none;
  text-align: center;
}

＆＃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" />
<footer>
  <div class="container">
    <div class="row-footer">

      <div class="row">
        <div class="nav navbar-nav">
          <a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
          <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
          <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
          <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
          <a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
          <a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
        </div>
      </div>
    </div>

  </div>
</footer>

＆＃13;

＆＃13;

＆＃13;

工作示例2：

＆＃13;

＆＃13;

.row-footer {
  background-color: #AfAfAf;
  margin: 200px 0;
}
.footer-nav {
  text-align: center;
  padding: 40px 0;
}
.footer-nav a {
  display: inline-block;
  padding: 0 20px;
}

＆＃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" />
<footer>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">

        <div class="row-footer">
          <div class="footer-nav">
            <a class="btn btn-social-icon btn-google-plus" href="#">
              <i class="fa fa-google-plus"></i>
            </a>
            <a class="btn btn-social-icon btn-facebook" href="#">
              <i class="fa fa-facebook"></i>
            </a>
            <a class="btn btn-social-icon btn-linkedin" href="#">
              <i class="fa fa-linkedin"></i>
            </a>
            <a class="btn btn-social-icon btn-twitter" href="#">
              <i class="fa fa-twitter"></i>
            </a>
            <a class="btn btn-social-icon btn-youtube" href="#">
              <i class="fa fa-youtube"></i>
            </a>
            <a class="btn btn-social-icon" href="#">
              <i class="fa fa-envelope-o"></i>
            </a>
          </div>

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

  </div>
</footer>

＆＃13;

＆＃13;

＆＃13;