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.
You can use grid instead of flexbox. The grid model is like the tables but with vitamins.
And in the HTML you would have
For responsive you can redefine the class, although if what you are going to put with small images you don't need it.
I hope it solves the problem for you.
EDIT To center each cell use justify-items: center
EDIT
Solution with flex
instead of grid-box use this class. The width is a function of the width of each image as they are 22 since 5x22 is 120px.
You can use justify-content: center, space-around or space-evenly. Try the one you like the most and if you want space between the images, give it something more than 120px. In the flex the empty divs are not necessary. Take the one you like the most
What do you think if you make a "container", apply a width to the container and let flex accommodate them according to a percentage? For 5 items, the % would be 20%.