在 Bootstrap 中居中图像

Posted 2023-03-06

【中文标题】在 Bootstrap 中居中图像

【英文标题】：Centering the image in Bootstrap

【发布时间】：2013-10-13 17:42:38

【问题描述】：

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

【问题讨论】：

试试这个<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 text-center">

@Morpheus 不工作 :(

你怎么知道它不起作用？您正在使用 class="img-responsive" 作为图像，它占用了 div 的整个宽度。尝试删除此类，看看会发生什么。

我想要 img 响应类到我的 html 先生，我不想删除这个类

在这种情况下，您的问题不是问题，因为图像应该占据您的 div 的整个宽度。

【参考方案1】：

2018 年更新

引导程序 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

引导 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 - center image demo

【讨论】：

很好的解释！

【参考方案2】：

.img-responsive 
     margin: 0 auto;
 

您可以在文档中编写上述代码，因此无需在图像标签中添加另一个类。

【参考方案3】：

使用这个作为解决方案

这对我来说非常有用..

<div align="center">
   <img src="">
</div>

【讨论】：

HTML5 不支持 align 属性。