Image side by side and centred

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>

http://stackoverflow.com/questions/11819417/css-center-two-images-in-css-side-by-side Look here — Przemek eS, Jan 11 '17 at 09:31
It looks like [centered to me](http://codepen.io/anon/pen/oBbaqd) — samayo, Jan 11 '17 at 09:31
yes @samayo you are correct i checked this question, there is no problem with that, i think he wants something more — Jishnu V S, Jan 11 '17 at 09:32
Are you using bootstrap at all @Geor1947 because you seem to be using some HTML classes that are similar to it, like: `img-responsive` and `row` — Neelam Khan, Jan 11 '17 at 09:34

Bhavin Shah · Answer 1 · 2017-01-11T09:51:03.427

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

score 0 · Answer 2 · answered Jan 11 '17 at 09:48

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

Neelam Khan · Answer 3 · 2017-01-11T10:51:57.230

0

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>

edited Jan 11 '17 at 10:51

answered Jan 11 '17 at 09:48

Neelam Khan

1,078
8
24

yeah that's it..but I want to keep this on mobile too...not picture under picture – Geor1947 Jan 11 '17 at 10:03
ok no problem, before I edit my answer to help further can you tell me whether or not you are using bootstrap? – Neelam Khan Jan 11 '17 at 10:04
I have updated my answer for you @Geor1947 , the CSS has been changed to ensure the images stay side by side on desktop and mobile. Take a look at my updated fiddle link too **https://jsfiddle.net/6fy2s02c/1/** – Neelam Khan Jan 11 '17 at 10:16
Ok, but I want the images to be more little..like was in the previous fiddle..and to keep centred. – Geor1947 Jan 11 '17 at 10:27
Firstly please accept my answer, secondly if you want the images to be smaller just change the width on this div `.image-wrapper` from `50%` to whatever you want. Also I asked you if you are using bootstrap, can you answer that? @Geor1947 I cannot do all the work here, you need to help me out too by at least answering a simple question. Thanks. – Neelam Khan Jan 11 '17 at 10:32
sorry, Yeah..i'm using bootstrap – Geor1947 Jan 11 '17 at 10:33
I want the image wrapper to be at 15% but if I do that the images don't stay centred – Geor1947 Jan 11 '17 at 10:43
Ok @Geor1947 I have updated my answer, if you would have mentioned that you were using bootstrap from the beginning it would have been easier. What I have added will help, check the fiddle link too > **https://jsfiddle.net/6fy2s02c/2/** And if you could accept my answer that would be great. Next time please put all the information in your question and use the correct tags. – Neelam Khan Jan 11 '17 at 10:46
it's ok on desktop...but I want to remain like on desktop..on mobile – Geor1947 Jan 11 '17 at 10:47
using your code..I found what I need. Thank you so much! Please make a new post to vote your solution – Geor1947 Jan 11 '17 at 10:51
I used the wrong bootstrap column classes by accident, here you go > **https://jsfiddle.net/6fy2s02c/3/** Also I have updated my answer, please accept it. – Neelam Khan Jan 11 '17 at 10:51

score 0 · Answer 4 · answered Jan 11 '17 at 09:52

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.

Image side by side and centred

4 Answers4