40

我正在使用 bootstrap 3.0 创建网站。我是新手。我想要什么，当浏览器尺寸特别小的时候，我想要 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>
4

3 回答 3

163

2018 年更新

引导程序 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

引导程序 3.x

编辑- 随着 Bootstrap 3.0.1 的发布，center-block现在可以在没有任何额外 CSS 的情况下使用该类。

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

引导程序 4

在 Bootstrap 4 中，mx-auto类（自动 x 轴边距）可用于将display:block. display:inline但是，默认情况下imgtext-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 - 中心图像演示

于 2013-10-07T16:54:15.633 回答
1 
.img-responsive {
     margin: 0 auto;
 }

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

于 2016-03-17T18:01:35.820 回答
-3

使用此作为解决方案

这对我来说非常有用..

<div align="center">
   <img src="">
</div>
于 2016-04-25T06:13:25.650 回答