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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:37:08  来源:igfitidea点击:

Centering the image in Bootstrap

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

提问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-responsiveif you're going to center all images..

或者,.img-responsive如果您要将所有图像居中,只需覆盖..

 .img-responsive {margin:0 auto;}

Demo: http://bootply.com/86123

演示:http: //bootply.com/86123

Bootstrap 3.x

引导程序 3.x

EDIT- With the release of Bootstrap 3.0.1, the center-blockclass 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-autoclass (auto x-axis margins) can be used to center images that are display:block. However, img is display:inlineby default so text-centercan 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>

Bootsrap 4 - center image demo

Bootsrap 4 - 中心图像演示

回答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>