使图像在Bootstrap中居中 [英] Centering the image in Bootstrap
问题描述
我正在使用bootstrap 3.0创建网站.我是新手.我想要的是,当浏览器尺寸太小时,我想要在div中心显示图像.
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>
推荐答案
2018年更新
Bootstrap 2.x
您可以创建一个新的CSS类,例如:
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">
或者,如果要将所有图像居中,只需覆盖.img-responsive
.
OR, just override the .img-responsive
if you're going to center all images..
.img-responsive {margin:0 auto;}
Demo: http://bootply.com/86123
Bootstrap 3.x
EDIT -随着Bootstrap 3.0.1的发布,现在可以使用center-block
类,而无需任何其他CSS..
EDIT - 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">
引导程序4
在Bootstrap 4中,mx-auto
类(自动x轴边距)可用于使display:block
图像居中.但是,img默认为display:inline
,因此text-center
可以在父级上使用.
In Bootstrap 4, the mx-auto
class (auto x-axis margins) can be used to center images that are display:block
. However, img is display:inline
by default so text-center
can be used on the parent.
<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>
这篇关于使图像在Bootstrap中居中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!