在bootstrap 3.0中居中映像 [英] Centering the image in bootstrap 3.0

问题描述

我使用bootstrap 3.0创建网站。我是新的bootstrap。

I m using bootstrap 3.0 to creating a website. I am new to bootstrap. what i want, i want image in center of div when browser size is extra small i have this code.

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

推荐答案

您可以创建一个新的CSS类，如： / p>

You could create a new CSS class such as:

.img-center {margin:0 auto;}

然后，将其添加到每个IMG：

And then, add this to each IMG:

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

OR，只需覆盖 .img-responsive

 .img-responsive {margin:0 auto;}

演示： http： /bootply.com/86123

Demo: http://bootply.com/86123

编辑：随着Bootstrap 3.0.1的发布， center-block 类现在可以使用没有任何额外的CSS ..

With the release of Bootstrap 3.0.1, the center-block class can now be used without any additional CSS..

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

这篇关于在bootstrap 3.0中居中映像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！