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;）

＆＃13;

#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;
}

＆＃13;

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>

以下是小提琴的链接：https://jsfiddle.net/aguhsdss/1/

保持多个图像在引导程序中居中

2 个答案: