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 - center image demo

Answer 2

.img-responsive {
     margin: 0 auto;
 }

您可以在文档中编写如上代码，因此无需在图像标记中添加另一个类。

Answer 3

使用此作为解决方案

这对我很有用..

<div align="center">
   <img src="">
</div>

将图像置于Bootstrap中心

3 个答案:

更新2018