Question

我想将我的图像集中在Bootstrap网格中，如下所示 - http://i.imgur.com/weTvp5Q.jpg;图像应位于蓝色框中（桌面和移动设备上）。

这是我的HTML：

  <div class="row">        
   <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
     <div class="image img-responsive">         
       <a href="#"><img class="img-responsive " src="http://i.imgur.com/GFZbJZr.jpg" border="0"></a>            
     </div>
    </div>      
   </div> 

   <div class="row">        
    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
     <div class="image img-responsive">         
       <a href="#"><img class="img-responsive " src="http://i.imgur.com/pJF2nvM.jpg" border="0"></a>            
     </div>
    </div>      
   </div> 

   <div class="row">        
    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
     <div class="image img-responsive">         
       <a href="#"><img class="img-responsive " src="http://i.imgur.com/JYYrpgD.jpg" border="0"></a>            
     </div>
    </div>      
   </div>

Answer 1

只需在图片中使用Bootstrap 3 center-block课程即可...

演示：http://bootply.com/104077

我还简化了你的标记以删除不必要的嵌套..

<div class="row">        
   <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">

       <a href="#"><img class="img-responsive center-block" src="http://i.imgur.com/GFZbJZr.jpg" border="0"></a>            

   </div> 
   <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">

       <a href="#"><img class="img-responsive center-block" src="http://i.imgur.com/pJF2nvM.jpg" border="0"></a>            

   </div> 
   <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">

       <a href="#"><img class="img-responsive center-block" src="http://i.imgur.com/JYYrpgD.jpg" border="0"></a>            

   </div>       
</div>

Answer 2

应该只是css的问题

.image a {
display: block;
}
.image a img {
margin 0 auto;
display: block;
}

Answer 3

试试这个。

img {
margin:0 auto;
width:50%
}

Answer 4

这样可以解决问题;）

.image.img-responsive {
    text-align: center; 
}

Answer 5

尝试添加你的css：

div.image {
  text-align: center;
}

将图像置于Bootstrap网格系统内

5 个答案:

演示：http://bootply.com/104077