Question

我有一个使用Bootstrap 3.3.5制作的网站。我想将div与图标居中，我也希望图标居中，就像text-align：center;如果它只是文本而不是Fonat Awesome图标会怎么做。这是我到目前为止所尝试的，css在我的css文件夹和custom.css页面中。

＆＃13;

@media (min-width: 992px) {
  .col-md-1-5 { width: 20%; }
  .col-md-2-5 { width: 40%; }
  .col-md-3-5 { width: 60%; }
  .col-md-4-5 { width: 80%; }
  .col-md-5-5 { width: 100%; }
}

@media (min-width: 1200px) {
  .col-lg-1-5 { width: 20%; }
  .col-lg-2-5 { width: 40%; }
  .col-lg-3-5 { width: 60%; }
  .col-lg-4-5 { width: 80%; }
  .col-lg-5-5 { width: 100%; }
}

.show-grid [class^=col-] span,
.container-fluid .show-grid [class^=col-] {
  display: block;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
}

[class^=col-] {
  margin-bottom: 2rem;
}

＆＃13;

<div class="row show-grid">
        <div class="col-sm-6 col-md-4-5 col-lg-1-5 text-center"><span class=""><a href="https://play.google.com/store/apps/details?id=com.nationalkitchencabinets.kitchensolutions" target="_blank">

      <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-google fa-stack-1x fa-inverse"></i>
                                </span>
                            </a></span>
        </div>
        <div class="col-sm-6 col-md-5-5 col-lg-1-5 text-center"><span class=""><a href="https://appsto.re/us/IxCMbb.i" target="_blank">
      <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-android fa-stack-1x fa-inverse"></i>
                                </span>
                            </a></span>
        </div>
        <div class="col-sm-6 col-md-3-5 col-lg-1-5 text-center"><span class=""><a href="mailto:info@nationalkitchencabinets.com">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
                                </span>
                            </a></span>
        </div>
        <div class="col-sm-6 col-md-3-5 col-lg-1-5 text-center"><span class=""><a href="https://www.facebook.com/NationalKitchenCabinets/" target="_blank">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                                </span>
                            </a></span>
        </div>
        <div class="col-sm-6 col-md-3-5 col-lg-1-5 text-center"><span class=""><a href="tel:1-413-374-2939">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-phone fa-stack-1x fa-inverse"></i>
                            </span>
                            </a></span>
        </div>
    </div>

＆＃13;

这就是现在的样子，图标左对齐，

Answer 1

您尝试对齐的元素是block元素，因此您只需使用margin: 0 auto而不是text-align: center。

.show-grid [class^=col-] span,
.container-fluid .show-grid [class^=col-] {
  text-align: center;
}

应该是：

.show-grid [class^=col-] span,
.container-fluid .show-grid [class^=col-] {
  margin: 0 auto;
}

我创建了一个展示此here的Bootply。

<强>更新：

在移动设备上让图标彼此相邻显示的临时黑客将如下所示：

@media (max-width: 500px) {
  .col-sm-6 {
    width: 20% !important;
    float: left;
  }
}

但是，这是一种解决方法，您应该只设置较小的列宽。 Bootstrap列总是最多加12，col-sm-6表示“小型设备上的6列”。通常，您使用col-sm-2 col-md-12 col-lg-12之类的东西来表示每个元素应占据中型和大型设备的全宽，并且只占小型设备宽度的六分之一。当然，12不能被5整除，所以你必须提出自己的解决方法，例如集中化或填充;）

展示黑客的第二小提琴可用here。

希望这有帮助！

中心div与Font Awesome

1 个答案: