Image side by side and centred - html

Question

I want to have two images centered side by side. I've tried a lot of things but when I'm trying to change the width (because the images are too large) I have some distance and it's not okay. I want the images centered side by side on both desktop and mobile.
<div class="row" style="text-align:center;"">
<div style="display:inline-block;">
<a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
<p class="text-center" style="font-size:1.2em">TST</p>
</div>
<div style="display:inline-block;">
<a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
<p class="text-center" style="font-size:1.2em">STS</p>
</div>
</div>

Answer 1

Try something like:
<style type="text/css">
#left{
float:left;
width:20%;
overflow:hidden;
margin-left: 1%;
}
#right{
overflow:hidden;
}
</style>
<div class="row">
<div id="left">
<a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
<p class="text-center" style="font-size:1.2em">TST</p>
</div>
<div id="right">
<a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
<p class="text-center" style="font-size:1.2em">STS</p>
</div>
</div>
It worked for me in the past when I had to to something similar...
Hope it will do for you as well

Answer 2

.img_wrapper{
display:flex;
margin:0 auto;
width:300px;
height:300px;
border:thin black solid;
}
.images{
margin: auto;
}
p{
text-align:center;
}
img{
width:125px;
height:125px;
}
<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">
<div class="img_wrapper">
<div class="images">
<a href="#">
<img class="img-responsive" src="http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg" >
</a>
<p>
TST
</p>
</div>
<div class="images">
<a href="#">
<img class="img-responsive" src="http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg" >
</a>
<p>
TST
</p>
</div>
</div>
</div>
Is this the same that you are looking for?
Here is JSFiddle
Hope this helps.

Answer 3

I would do that with Flexbox - If you can life with a little bit of missing browser-support (but in my opinion it is useable).
The code for the ".row"-div (give it an extra class if you use Bootstrap) would be in CSS (without vendor prefixes):
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-itmes: center;
}
With that the inner Elements are next to each other as long as they are fitting so and also vertically centered in the element.
Here the main flexbox-guide i use: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I hope my answer was helpful.

Answer 4

Edited Answer
As you are using Bootstrap (please see comments below) You can center the images using the Boostrap column system.
Please see here I have updated the CSS, a new col-no-padding class has been created that you can use anywhere if you wish to as it takes away the guttering in the columns and then some basic link and image styles have been added:
.col-no-padding {
padding-left:0;
padding-right:0;
}
.image-wrapper a {
display: block;
}
.image-wrapper img {
width:100%;
}
And the HTML tidied; utilising Bootstraps column and row structure:
<div class="row">
<div class="col-xs-3 col-xs-offset-3 col-sm-2 col-sm-offset-4 col-no-padding">
<div class="image-wrapper">
<a ref="">
<img src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" alt="" class="img-responsive" />
</a>
<p class="text-center" style="font-size:1.2em">TST</p>
</div>
</div>
<div class="col-xs-3 col-sm-2 col-no-padding">
<div class="image-wrapper">
<a ref="">
<img src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" alt="" class="img-responsive" />
</a>
<p class="text-center" style="font-size:1.2em">TST</p>
</div>
</div>
</div>