Question

我正在使用bootstrap将所有屏幕尺寸上的h1文本下方的社交图标块居中。我几乎得到了它，只有2种尺寸可以随时移动。

Here is how it looks where it is shifted to the left slightly

这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div>
    <label>Country filter</label>
    <input type="text" ng-model="countryFilter" />

    <label>Order by</label>
    <select ng-model="selectedOrder" ng-options="option.label for option in options">

    </select>
  </div>
  <ul>
    <li ng-repeat="detail in details | filter:{country: countryFilter} | orderBy:selectedOrder.value">{{ detail }}</li>
  </ul>
</body>

</html>

这是我的css：

<div id="container">

        <div class="social-and-coming">
    <div class="coming-soon text-center ">
        <h1 class="coming ">Coming Soon</h1>
    </div>
    <div class="row">
    <ul class="col-md-offset-3 col-md-11 col-sm-offset-3 col-sm-11 col-xs-offset-1 col-xs-11">

        <li class="col-xs-1 col-sm-1 col-md-1"><a href=""><img src="/wp-content/themes/avaziomedia/Facebook.png" alt=""></a></li> 
        <li class="col-xs-1 col-sm-1 col-md-1"><a href=""><img src="/wp-content/themes/avaziomedia/Twitter.png" alt=""></a></li>
        <li class="col-xs-1 col-sm-1 col-md-1"><a href=""><img src="/wp-content/themes/avaziomedia/Instagram.png" alt=""></a></li>
        <li class="col-xs-1 col-sm-1 col-md-1"><a href=""><img src="/wp-content/themes/avaziomedia/Youtube.png" alt=""></a></li>
        <li class="col-xs-1 col-sm-1 col-md-1"><a href=""><img src="/wp-content/themes/avaziomedia/pinterest.png" alt=""></a></li>
    </ul>
    </div>
    </div>
</div>

任何帮助将不胜感激！

Answer 1

只需删除列表并使用text-center，就像您对标题所做的那样，它应该有效：

<div id="container">
    <div class="social-and-coming">
        <div class="coming-soon text-center">
            <h1 class="coming">Coming Soon</h1>
        </div>
        <div class="text-center">
            <a href=""><img src="/wp-content/themes/avaziomedia/Facebook.png" alt=""></a>
            <a href=""><img src="/wp-content/themes/avaziomedia/Twitter.png" alt=""></a>
            <a href=""><img src="/wp-content/themes/avaziomedia/Instagram.png" alt=""></a>
            <a href=""><img src="/wp-content/themes/avaziomedia/Youtube.png" alt=""></a>
            <a href=""><img src="/wp-content/themes/avaziomedia/pinterest.png" alt=""></a>
        </div>
    </div>
</div>

Answer 2

你正在使用一些自举偏移，所以它永远不会在中间。我建议简化这个并删除UL类并添加一个id来应用以下CSS：

#socialLinks {
  list-style:none;
  text-align: center;
}

#socialLinks li {
    margin: 0;
    display: inline-block;
    float: none;
}

<强> jsFiddle demo

#container {
  // min-height:100%;
  position: relative;
}

.site-title a {
  font-family: Heiti TC;
  color: #E8970C;
}

.text-center {
  color: #E8970C;
}

.coming-soon h1 {
  font-family: Heiti TC;
  font-size: 75px;
}

.row {
  // width:700px;
  margin: 0px auto;
}

.col-xs-1 {
  margin-left: 15px;
}

li {
  margin-right: 20px;
  margin-top: 20px;
}

img {
  width: 40px;
}

#socialLinks {
  list-style:none;
  text-align: center;
}

#socialLinks li {
    margin: 0;
    display: inline-block;
    float: none;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container">

  <div class="social-and-coming">
    <div class="coming-soon text-center ">
      <h1 class="coming ">Coming Soon</h1>
    </div>
    <div class="row">
      <ul id="socialLinks">

        <li class="col-xs-1 col-sm-1 col-md-1">
          <a href=""><img src="https://placehold.it/100x100" alt=""></a>
        </li>
        <li class="col-xs-1 col-sm-1 col-md-1">
          <a href=""><img src="https://placehold.it/100x100" alt=""></a>
        </li>
        <li class="col-xs-1 col-sm-1 col-md-1">
          <a href=""><img src="https://placehold.it/100x100" alt=""></a>
        </li>
        <li class="col-xs-1 col-sm-1 col-md-1">
          <a href=""><img src="https://placehold.it/100x100" alt=""></a>
        </li>
        <li class="col-xs-1 col-sm-1 col-md-1">
          <a href=""><img src="https://placehold.it/100x100" alt=""></a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 3

这很容易：

.yourclass {
    width: SPECIFY_WIDTH;
    margin: 0 auto;
}

它始终以任何屏幕尺寸为中心。如果您想在小型设备上使用间距，请将填充添加到class。

Answer 4

你能否使用Bootstraps Div类助手？

类：文本中心（文本）类：中心块（图像）

它们似乎对我有用，我不做偏移，所以不是100％它们的效果。

在所有屏幕尺寸引导程序中居中图像块

4 个答案: