Centering 2 images with label in a row in Bootstrap - html

Question

The goal is that I want both images to have be side by side and centered in the middle of the row.
I tried to do that via adjusting the columns of the row
The problem is that even with trying to center via rows, it always looks a little off center and if I change the max-width to be a little bigger, the images are no longer side by side and are on top of one another
The height and width of the images are...
graft1/graft2 - height="333" width="500"
ivan1/ivan2 - height="542" width="400"
Here is my HTML
<section class="wrapper style1">
<div class="container">
<div id="content">
<!-- Content -->
<article>
<header>
<h2>Before and After</h2>
</header>
<div class="row">
<div class="div_baPics">
<img id="graft1" class="baPics" src="images/graft1.jpg" alt="">
<label for="graft1">Before</label>
<img id="graft2" class="baPics" src="images/graft2.jpg" alt="">
<label for="graft2">After</label>
</div>
</div>
<div class="row">
<div class="div_baPics">
<img id="ivan1" class="baPics" src="images/ivan1.jpg" alt="">
<label for="ivan1">Before</label>
<img id="ivan2" class="baPics" src="images/ivan2.jpg" alt="">
<label for="ivan2">After</label>
</div>
</div>
</article>
</div>
</div>
</section>
And here is the CSS for baPics
.baPics {
max-width: 30%;
}
.div_baPics {
text-align: center;
}

Answer 1

Since you're using Bootstrap, I went with its system. See this fiddle :
http://jsfiddle.net/Bladepianist/55gyp94n/
Well, i did use real image so that you could see the result but with that (when I tested anyway), your image should resize, following the screen.
.thumbnail {
border: none;
}
This code isn't needed, unless you don't want the border of the thumbnail ;).
Hope it will satisfy you and if that's the case, thumbs up :p.

Answer 2

You need to wrap img and corresponding label in a wrapper, like so:
/*Just to make a difference between pics*/
body {
background: grey;
}
/*Minimal CSS*/
.div_baPics {
text-align: center; /*Center alignment for the wrapper*/
font-size: 0; /*To remove the white space between pics*/
}
.pic {
display: inline-block;
}
.pic img {
display: block;
/*This should be set by default by Bootstrap*/
max-width: 100%;
height: auto;
}
.pic label {
display: block;
font-size: 16px; /*Or whatever font-size you use*/
}
<div class="div_baPics">
<div class="pic">
<img src="http://i.imgur.com/zNTWaR3.jpg" />
<label>Pic 1</label>
</div>
<div class="pic">
<img src="http://i.imgur.com/IqiJN2f.png" />
<label>Pic 2</label>
</div>
</div>