How to center an image in the middle

I need to center an icone in the center of 4 images, as shown below but it isn’t very effective. See here my working sample

Also in the small screen,when all images are in column, I am expecting to be horizontally centered between the 1st and the 2nd image.

The easiest way would be to pull the image out of the column and place it absolutely from outside using a common parent. You can do it with the structure you have now but we need a unique class on .row to over-ride some bootstrap defaults and allow us to create a positioning context that covers the whole 4 images.

Add a new class here to .row (I’ve called it four-images).

<div class="row four-images">  
 <div class="col-lg-6">   
        <img class="imgr" src="XImg_1024_247154137924.jpg" alt="">  
        <img class="picValor" src="picUF.png" alt="Valor ">  </div>  <div class="col-lg-6">   <img class="imgr" src="XImg_1024_247154140955.jpg" alt="">  </div>  <div class="col-lg-6">   <img class="imgr" src="XImg_1024_247154143313.jpg" alt="">  </div>  <div class="col-lg-6">   <img class="imgr" src="XImg_1024_247154146259.jpg" alt="">  </div> </div>

Then add this css.

.four-images{position:relative;}
.four-images .col-lg-6{
    position:static;
}
img.picValor{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    max-width:180px;
}

That will auto centre the icon in the middle of the 4 images whether they are vertical or in a block of four.

4 Likes

Perfect. Thank you PaulOB :slight_smile:

1 Like