Centrar varios objetos alineados perfectamente

[serbarmax]

Entiendo que es un post viejo el que estoy respondiendo y seguramente lo han solucionado pero no postearon la solución. Estoy con un problema similar, tengo que alinear horizontalmente 4 divs distribuidos equitativamente y en la forma responsiva o sea cambiando la resolución deben acomodarse.

Intenté copiar algo de lo que se puso en el ejemplo pero se me alinea todo a la izquierda.
Muchas gracias.

Código:

<div style="text-align: justify; width: 100%; ">
<div  style="display: inline-block;  width: 150px;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
<div  style="display: inline-block;  width: 150px;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
<div  style="display: inline-block;  width: 150px;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
<div  style="display: inline-block;  width: 150px;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
</div>

<div style="text-align: justify; width: 100%;">
<div  style="display: inline-block;  width: 150px;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
<div  style="display: inline-block;  width: 150px;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
<div  style="display: inline-block;  width: 150px;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
<div  style="display: inline-block;  width: 150px;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
</div>
<div style="text-align: justify; width: 100%;">
<div  style="display: inline-block;  width: 150px;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
<div  style="display: inline-block;  width: 150px;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
<div  style="display: inline-block;  width: 150px;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
<div  style="display: inline-block;  width: 150px;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
</div>
</div>

La clase contenedor alterna las imágenes presentadas cuando el mouse se posiciona sobre ellas.

Código:

.contenedor {
  position: relative;
  height: 90px; 
  width: 315px; 
  margin: 20px auto;  
}

.contenedor img {
  position: absolute; 
  left: 0; 
  /* transition: opacity 1s ease-in-out; */
}

.contenedor img.top:hover {
  opacity: 0;
}

[rodrypaladin]

Mira a ver si te refieres a esto: Ver ejemplo en vivo

Le he puesto algunos estilos para darle colorcillo y que lo veas mejor

Código HTML:

<div class="padre">
  <div class="uno">
    Col 1
  </div>
  <div class="dos">
    Col 2
  </div>
  <div class="tres">
    Col 3
  </div>
  <div class="cuatro">
    Col 4
  </div>
  
</div>
 

Código CSS:

.padre {
  display:flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}
 
.uno, .dos, .tres, .cuatro {
  min-width: 100px;
  padding: 5px;
  text-align: center;
}
 
.uno {
  background: grey;
}
 
.dos {
  background: orange;
}
 
.tres {
  background: green;
}
 
.cuatro {
  background: blue;
}
 

[Rafael]

Yeap. Flexbox es (otra vez) la mejor opción.

serbarmax, no pongas código CSS dentro de la etiqueta html.