How to center an image in the middle

[Corobori]

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.

[PaulOB]

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.

[Corobori]

Perfect. Thank you PaulOB