CSS 在 Bootstrap 中居中图像
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19219951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Centering the image in Bootstrap
提问by Love Trivedi
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.
我正在使用引导程序 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>
回答by Zim
Update 2018
2018 年更新
Bootstrap 2.x
引导程序 2.x
You could create a new CSS class such as:
您可以创建一个新的 CSS 类,例如:
.img-center {margin:0 auto;}
And then, add this to each IMG:
然后,将其添加到每个 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
如果您要将所有图像居中,只需覆盖..
.img-responsive {margin:0 auto;}
Demo: http://bootply.com/86123
Bootstrap 3.x
引导程序 3.x
EDIT- With the release of Bootstrap 3.0.1, the center-block
class can now be used without any additional CSS..
编辑- 随着 Bootstrap 3.0.1 的发布,center-block
现在可以在没有任何额外 CSS 的情况下使用该类。
<img src="images/2.png" class="img-responsive center-block">
Bootstrap 4
引导程序 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.
在 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>
回答by shiyani suresh
.img-responsive {
margin: 0 auto;
}
you can write like above code in your document so no need to add one another class in image tag.
您可以在文档中编写如上代码,因此无需在图像标签中添加另一个类。
回答by Akshay Shrivastav
Use This as the solution
使用此作为解决方案
This worked for me perfectly..
这对我来说非常有效..
<div align="center">
<img src="">
</div>