在 Bootstrap 中居中图像
[英] Centering the image in Bootstrap
本文介绍了在 Bootstrap 中居中图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用 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 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 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 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 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 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>
解决方案
2018 年更新
引导程序 2.x
您可以创建一个新的 CSS 类，例如:
.img-center {margin:0 auto;}
然后，将其添加到每个 IMG:
或者，如果您要将所有图像居中，只需覆盖 .img-responsive..
.img-responsive {margin:0 auto;}
演示:
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>
解决方案
Update 2018
Bootstrap 2.x
You could create a new CSS class such as:
.img-center {margin:0 auto;}
And then, add this to each IMG:
<img src="images/2.png" class="img-responsive img-center">
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 - 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 4
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>
Bootsrap 4 - center image demo
这篇关于在 Bootstrap 中居中图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
