将图像置于Bootstrap中心

Question

我使用bootstrap 3.0来创建一个网站.我是bootstrap的新手.我想要的是,当浏览器尺寸特别小时我希望图像在div的中心我有这个代码.

<div class="col-lg-10 ccol-lg-offset-1 col-md-12 col-sm-12 ">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2  col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2  col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2  col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>

Answer 1

更新2018年

Bootstrap 2.x

您可以创建一个新的CSS类,例如:

.img-center {margin:0 auto;}

然后,将其添加到每个IMG:

 <img src="images/2.png" class="img-responsive img-center">

或者,.img-responsive如果您要将所有图像居中,请覆盖它.

 .img-responsive {margin:0 auto;}

演示:http://bootply.com/86123

Bootstrap 3.x

编辑 - 随着Bootstrap 3.0.1的发布,center-block现在可以使用该类而无需任何额外的CSS ..

 <img src="images/2.png" class="img-responsive center-block">

Bootstrap 4

在Bootstrap 4中,mx-auto类(自动x轴边距)可用于居中图像display:block.但是,img display:inline默认情况下text-center可以在父级上使用.

<div class="container">
    <div class="row">
        <div class="col-12">
            <img class="mx-auto d-block" src="//placehold.it/200">  
        </div>
    </div>
    <div class="row">
        <div class="col-12 text-center">
            <img src="//placehold.it/200">  
        </div>
    </div>
</div>

Bootsrap 4 - 中心图像演示