Center three images in horizontal line

Question

I want 3 img to be in a horizontal line and to be centered, pls help?

My code: Html:

<div class="sidBilder">
    <div class="row">
      <div class="col-sm-12">
        <div class="row">

          <div class="col-sm-12 col-lg-4">
            <img class="img-fluid imgCenter" src="img/gapamatch.jpg">
            <img class="img-fluid imgCenter" src="img/laget18.jpg">
            <img class="img-fluid imgCenter" src="img/Kamratgarden.jpg">
        </div>


       </div> 
    </div>   
  </div> 
</div>

css: I dont know what to write here to make it center and in a horizontal line?

Did you try to search how to 1/ put 3 img in horizontal line 2/ center img in google and try something before asking for code? — Mickaël Leger, Apr 05 '18 at 13:49
So please can you show us what do you tried? Here is an anwser for the "centered" part : https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div and for the "in a horizontal line", just wrap each img in a `
` so the 3 picture will always be in the same block, no? — Mickaël Leger, Apr 05 '18 at 14:00

score 0 · Answer 1 · answered Apr 05 '18 at 14:12

0

Here is a way to do it : 3 pictures with different size in one horizontale line and centered.

.background {
 background-color : lightpink;
}

img {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="row background">
          <div class="col-4 wrapper">
            <img class="img-fluid imgCenter" src="https://picsum.photos/200/300">
          </div>
          <div class="col-4 wrapper">
            <img class="img-fluid imgCenter" src="https://picsum.photos/300/400">
          </div>
          <div class="col-4 wrapper">
            <img class="img-fluid imgCenter" src="https://picsum.photos/500/200">
          </div>
       </div> 
    </div>   
  </div> 
</div>

Is it what you are looking for?

answered Apr 05 '18 at 14:12

Mickaël Leger

3,426
2
17
36

Not really, when i test this my 3 img is just on the left side on top of each other – Peter Apr 05 '18 at 15:05
Do you add the html block around each image? And do you have some other css in your side that could be a problem? – Mickaël Leger Apr 05 '18 at 15:07
this is the only css i have beside the one being posted here: .logoText{ text-align:center; font-family: 'Bowlby One SC', cursive; font-size:20px; color:blue; text-shadow: 2px 2px #EEEEEE; padding-top:40px; } – Peter Apr 05 '18 at 15:11
Ok so it shouldn't be a problem, to make it works check : 1/ Do you have a block around your picture? 2/ Do you use bootstrap4? Because `col-4` doesn't exist before I think, so maybe you should change it for the right class according to your bootstrap version – Mickaël Leger Apr 05 '18 at 15:17
How do i know if i use bootstrap4? I am a beginner in this so i need a little help :( – Peter Apr 05 '18 at 15:19
I saw you use "col-sm-12", it's from bootstrap no? Check in your balise after the begin of your when you load the bootstrap lib, you should have the version ! If you use it with a CDN you should just click the link and you should have the information – Mickaël Leger Apr 05 '18 at 15:24

Center three images in horizontal line

1 Answers1