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

Question

我正在习惯引导的响应能力，并且遇到了一个小障碍，通常我会显示 2 个以上的图像，但截至目前我只有 2 个图像，我想暂时将它们集中在下面的此页面链接中，并让它们也响应。

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

点击椽子选项卡

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

有没有一个简单的元素来实现这一目标？似乎文本对齐的内联 html 什么也没做，中心标记也没有。

谢谢院长

代码SNIP 它目前的情况

<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;
}

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

这里有一个很好的资源，可以开始使用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 小时就已经到了。伤心再次感谢