Intento hacer una tabla de precios en HTML y CSS, donde también se muestran iconos de aplicaciones móviles.
Intento lograr esto:
Son 5 iconos por fila, todos centrados.
Ahora mismo tengo esto:
No he logrado tener solo 5 iconos por fila y que las siguientes filas, se muestren centradas horizontalmente.
jsfiddle: https://jsfiddle.net/p6384u1o/
.plan-item {
padding-bottom: 16px;
}
.plan-container .plan-item {
background-color: white;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
width: 300px;
height: 300px;
}
.plan-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.free-apps-container {
color: black;
width: 100%;
padding: 0 22px;
text-align: center;
h6 {
font-size: 14px;
}
ul {
height: 144px;
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
}
ul li {
list-style-type: none;
margin: 6px 4px;
float: left;
}
ul li:nth-child(5n+1) {
clear: both;
}
}
<div class="plan-container">
<div class="plan-item">
<div class="free-apps-container">
<h6>Center</h6>
<ul>
<img src="https://www.iconpacks.net/icons/1/free-whatsapp-icon-121-thumb.png" width="22" height="22" />
<img src="https://www.iconpacks.net/icons/1/free-whatsapp-icon-121-thumb.png" width="22" height="22" />
<img src="https://www.iconpacks.net/icons/1/free-whatsapp-icon-121-thumb.png" width="22" height="22" />
<img src="https://www.iconpacks.net/icons/1/free-whatsapp-icon-121-thumb.png" width="22" height="22" />
<img src="https://www.iconpacks.net/icons/1/free-whatsapp-icon-121-thumb.png" width="22" height="22" />
<img src="https://www.iconpacks.net/icons/1/free-whatsapp-icon-121-thumb.png" width="22" height="22" />
<img src="https://www.iconpacks.net/icons/1/free-whatsapp-icon-121-thumb.png" width="22" height="22" />
</ul>
</div>
</div>
</div>
He intentado utilizar flexbox pero no he logrado alguna diferencia. Cualquier ayuda es bienvenida.