如何在 bootstrap 中将 2 张图片居中

Question

我正在习惯 bootstrap 的响应能力，但我遇到了一个小问题，通常我会显示 2 张以上的图像，但截至目前我只有 2 张图像，我会希望暂时将他们集中在下面的此页面 link 上，并让他们也做出回应。

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

点击椽子选项卡

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

是否有简单的添加元素来实现这一点？似乎内联文本对齐 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>

Answer 1

使用弹性框

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

删除行和 col-* bootstrap 类。

这是开始使用 flexbox 的重要资源：

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

Answer 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

希望对您有所帮助。

Answer 3

我更改了仅对椽子响应的 img，方法是向元素添加 1，然后使用此代码设置样式。

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

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

如何在 bootstrap 中将 2 张图片居中

how to center 2 images in bootstrap

html

css

centering

twitter-bootstrap