I'm trying to make a pricing table in HTML and CSS, where mobile app icons are also displayed.
I try to achieve this:
There are 5 icons per row, all centered.
Right now I have this:
I have not managed to have only 5 icons per row and that the following rows are displayed centered horizontally.
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>
I have tried using flexbox but have not made any difference. Any help is welcome.