how to center 2 images in bootstrap

Question

I am getting use to the responsiveness of bootstrap and I have hit a small snag, normally I would have more than 2 images to display, but as of right now I only have 2 images and I would like to center them on this page link below for the time being and have them be responsive also.

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

Click on RAFTERS TAB

I know I can do this with margins or padding, but I don't want to also have to make a media css to get it to look right on devices etc.

Is there a easy add to the element to make this happen? It seems text-align inline html did nothing nor did center tag.

Thank you Dean

CODE SNIP of how it is currently

<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

Use flexbox

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

remove the row and col-* bootstrap classes as well.

Here's a great resource to get started on flexbox:

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

Answer 2

I changed the img responsive for the rafters only, by adding a 1 to the element and then I styled it with this code.

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

Sorry the awarded points was off because someone felt I wasn't trying hard enough, I can assure you I was at this 3 hours before coming here. SAD Thx again

Answer 3

.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>

Is this the same that you are looking for?

Here is JSFiddle

Hope this helps.