css - 保持多个图像在 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 属性更改为 auto (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;
}