如何在引导程序中居中 2 个图像答案

【问题标题】：how to center 2 images in bootstrap如何在引导程序中居中 2 个图像
【发布时间】：2017-05-17 01:27:03
【问题描述】：

我已经习惯了 bootstrap 的响应能力，但遇到了一个小障碍，通常我会显示 2 张以上的图片，但目前我只有 2 张图片，我想将它们集中在这个暂时在下面的页面链接，并让他们也做出响应。

http://dagrafixdesigns.com/2019/industrial-darker/graphics.html

点击椽子标签

我知道我可以使用边距或填充来做到这一点，但我不想也必须制作媒体 css 以使其在设备等上看起来正确。

是否有一个简单的添加元素来实现这一点？似乎 text-align inline html 什么也没做，中心标签也没有。

谢谢院长

当前情况的代码片段

<div class="row project-listing">
<div class="col-md-4 project-block"><!--Project block start-->
    <div class="pro-thumb"><!--Pro thumb start--> 
        <a href="images/Hang/PG_ZOOM.png" class="image-link" title="Project Light Box Gallery Title"> <img src="images/Hang/PG_ZOOM.png" alt="" class="img-responsive"> </a> 
    </div>
    <!--Pro thumb start--> 
</div>
<!--Project block start-->
<div class="col-md-4 project-block"><!--Project block start-->
    <div class="pro-thumb"><!--Pro thumb start--> 
        <a href="images/Hang/AB_ZOOM.png" class="image-link" title="Project Light Box Gallery Title 2"><img src="images/Hang/AB_ZOOM.png" alt="" class="img-responsive"></a> 
    </div>
    <!--Pro thumb start--> 
</div>
<div class="hiderafters">
    <div class="col-md-3 project-block"><!--Project block start-->
        <div class="pro-thumb"><!--Pro thumb start--> 
            <a href="images/gallery-zoom.jpg" class="image-link" title="Project Light Box Gallery Title 3"><img src="images/thumb.jpg" alt="" class="img-responsive"></a> 
        </div>
        <!--Pro thumb start--> 
    </div>
<div class="col-md-3 project-block"><!--Project block start-->
    <div class="pro-thumb"><!--Pro thumb start--> 
        <a href="images/gallery-zoom.jpg" class="image-link" title="Project Light Box Gallery Title 4"><img src="images/thumb.jpg" alt="" class="img-responsive"></a> 
    </div>
    <!--Pro thumb start--> 
</div>
<div class="col-md-3 project-block"><!--Project block start-->
    <div class="pro-thumb"><!--Pro thumb start--> 
        <a href="images/gallery-zoom.jpg" class="image-link" title="Project Light Box Gallery Title 5"> <img src="images/thumb.jpg" alt="" class="img-responsive"> </a> 
    </div>
    <!--Pro thumb start--> 
    </div>
    <!--Project block start-->
    <div class="col-md-3 project-block"><!--Project block start-->
        <div class="pro-thumb"><!--Pro thumb start--> 
           <a href="images/gallery-zoom.jpg" class="image-link" title="Project Light Box Gallery Title 6"><img src="images/thumb.jpg" alt="" class="img-responsive"></a> 
        </div>
        <!--Pro thumb start--> 
    </div>
    <div class="col-md-3 project-block"><!--Project block start-->
        <div class="pro-thumb"><!--Pro thumb start--> 
            <a href="images/gallery-zoom.jpg" class="image-link" title="Project Light Box Gallery Title 7"><img src="images/thumb.jpg" alt="" class="img-responsive"></a> 
        </div>
        <!--Pro thumb start--> 
    </div>
    <div class="col-md-3 project-block"><!--Project block start-->
        <div class="pro-thumb"><!--Pro thumb start--> 
            <a href="images/gallery-zoom.jpg" class="image-link" title="Project Light Box Gallery Title 8"><img src="images/thumb.jpg" alt="" class="img-responsive"></a> 
        </div>
    </div>
    <!--Pro thumb start--> 
</div>
</div>

【问题讨论】：

标记为该问题没有提供您当前如何尝试对齐图像的代码 sn-p，此问题属于“嘿 stackoverflow，为我做”的类型

标签： html css twitter-bootstrap centering

【解决方案1】：

使用弹性盒

.project-listing {
  display: flex;
  justify-content: middle;
  align-items: flex-start;
  flex-wrap: wrap;
}

同时删除 row 和 col-* 引导类。

这里有一个很好的 flexbox 入门资源：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

谢谢！但是出于这个目的，我试图留在引导程序中。我想我在这里很近，只是还没有弄清楚要添加什么内联 html 来使它们居中。
这个答案有效，我需要玩一些你的代码，但它工作得很好，我也可以学习这个 flexbox，这很有帮助！我不必删除行或列，这就是我想要的样子。谢谢！！

【解决方案2】：

.project-listing{
  margin:0 auto;
  display:flex;
  border:thin red solid;
}

.img_div{
  margin:auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row project-listing">
<div class="img_div">
    <img src="http://img.xcitefun.net/users/2011/02/231252,xcitefun-beautiful-small-nature-world-05.jpg" class="img-responsive" width="100" height="100">
</div>

<div class="img_div">
    <img src="http://img.xcitefun.net/users/2011/02/231252,xcitefun-beautiful-small-nature-world-05.jpg" class="img-responsive" width="100" height="100">
</div>

<div class="img_div">
    <img src="http://img.xcitefun.net/users/2011/02/231252,xcitefun-beautiful-small-nature-world-05.jpg" class="img-responsive" width="100" height="100">
</div>

这和你要找的一样吗？

这里是JSFiddle

希望这会有所帮助。

【讨论】：

【解决方案3】：

我只更改了椽子的 img 响应，将 1 添加到元素，然后使用此代码设置样式。

.project-listing1 {
  display: flex;margin:0 auto;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

很抱歉，因为有人觉得我不够努力，所以奖励积分被取消了，我可以向你保证，我在来这里前 3 小时就已经到了。伤心再次感谢

【讨论】：