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>

这是我的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>

试试这个

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

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

这样就可以了；）

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

---

尝试添加css：

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

div.image {
  text-align: center;
}

---

应该只是css的问题

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

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

---

只需在图像中使用bootstrap3

中心块

类即可

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

演示： 我还简化了标记以删除不必要的嵌套

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

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

建议提供一个正常工作的示例。例如，斯凯利的回答是正确的。将“中心块”类添加到imageCab的注释是正确的，请按照Skelly的说明操作。哈哈，谢谢。我有它的工作，但我还有一个问题，请查看我对Skelly的解决方案的评论。谢谢，这是有效的。我还有一个悬停效果，上面有颜色叠加和描述，我也需要居中，我该如何居中呢？