使多张图片居中 bootstrap

Question

我一直在尝试使用包含多个图像的网格布局。我试图保持图像之间的边距间距相同，并在页面调整大小时使整个组居中到页面中间。

为了让图片分开，我留了 20 像素的边距。我放 col-xx-xx 是为了让内容居中，但内容往往会向左移动。

代码如下：

#fund {
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBIwOgafnZrnDssRi0czWu7VKvSLVjbwi2VYsIF3u0QBgGZbFSOw');
  height: 200px;
  width: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  margin:20px;
}

#fund h3{
  padding-bottom:80px;
}

#fund .btn {
  position: bottom;
}

    <div class="container">
 <div class="row">
  <div class="platform">
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="fund">
       <h3>A Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="fund">
       <h3>B Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="fund">
       <h3>C Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm col-centered">Learn More</a></p>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="fund">
       <h3>D Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12" id="fund">
       <h3>E Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="fund">
       <h3>F Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="fund">
       <h3>G Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="fund">
       <h3>H Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-2 col-xs-8 col-xs-offset-2" id="fund">
       <h3>I Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-2 col-xs-8 col-xs-offset-2" id="fund">
       <h3>J Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-2 col-xs-8 col-xs-offset-2" id="fund">
       <h3>K Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-2 col-xs-8 col-xs-offset-2" id="fund">
       <h3>L Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
       </div>       
      </div>
   </div>
 </div>
</div>

Answer 1

将左右边距属性更改为自动 (margin:20px auto;)

#fund {
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBIwOgafnZrnDssRi0czWu7VKvSLVjbwi2VYsIF3u0QBgGZbFSOw');
  height: 200px;
  width: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  margin:20px auto;
}

Answer 2

您在找这样的东西吗？

html,body {
  height: 100%;
  overflow: hidden;
}
body{
  background-color: #eee;
  font-family: arial;
  display: flex;
  align-items: center;
  justify-content: center;
}
* {
    box-sizing: border-box;
}
.container{
  padding: 20px;
}
.col{
  width: 25%;
  float: left;
  padding: 40px;
  min-width: 240px;
  text-align: center;
  color: #263238;
  font-weight: bold;
}
.box{
  height: 200px;
  width: 200px;
  color: #fff;
  margin: auto;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBIwOgafnZrnDssRi0czWu7VKvSLVjbwi2VYsIF3u0QBgGZbFSOw');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

<div class="container">
  <div class="col">
    <div class="box">Image1</div>
  </div>
  <div class="col">
    <div class="box">Image2</div>
  </div>
  <div class="col">
    <div class="box">Image3</div>
  </div>
  <div class="col">
    <div class="box">Image4</div>
  </div>
</div>

这是 link 到 fiddle：https://jsfiddle.net/aguhsdss/1/

使多张图片居中 bootstrap

Keeping multiple images centered in bootstrap

css

center

twitter-bootstrap-3