I have been attempting to replicate the layout shown in the image for quite some time.
The elements (.element) are aligned vertically but they are not centered, instead they stick to the left side.
My current code is as follows:
HTML:
<div id="_technology_page" class="region">
<div class="actions_container">
<div class="actions">
{{#each actions}}
<div class="action">
<a href="{{link}}">
<img src="/img/technology/grafiki/{{icon}}.png" alt="">
<p class="action_text">
{{text}}
</p>
</a>
</div>
{{/each}}
</div>
</div>
</div>
CSS (SCSS):
#_technology_page {
.actions_container {
max-width: 100%;
position: relative;
text-align: center;
display: flex;
.actions {
position: relative;
.action {
float: left;
margin: 10px 40px;
text-align: center;
height: 300px;
width: 250px;
display: flex;
img {
margin: auto;
width: 120px;
}
.action_text {
width: 100%;
color: black;
position: absolute;
bottom: 0;
}
}
}
}
}
I have tried various solutions and looked at examples, but nothing seems to achieve the desired outcome.
Even when attempting to use the Bootstrap grid system, the elements remain aligned to the left of the container.
If possible, could you please provide some guidance or examples on how to properly implement this? I seem to be stuck and unsure of how to proceed further.