使图像在Bootstrap中居中

小编典典

使图像在Bootstrap中居中

css

我正在使用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>

阅读 235

2020-05-16

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

引导程序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-中心图像演示

2020-05-16