我想像这样将图像置于 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>
最佳答案
只需在图像中使用 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>
关于html - 在 Bootstrap 网格系统中居中图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20953752/