Display elements in a inline-block depend on section width - html

Question

I have tried for some time to do something like on the image.
Elements (.element) goes down but they are not centered but stick left.
My code now is:
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;
position: relative;
position: relative;
margin: 10px 40px;
text-align: center;
float: left;
height: 300px;
width: 250px;
display: flex;
img {
margin: auto;
width: 120px
}
.action_text {
width: 100%;
color: black;
position: absolute;
bottom: 0;
}
}
}
}
}
I have tried many things, search examples, bot nothing works as I want it to works.
Also, I have tried to do it on Bootstrap grid system, but those elements are still stuck to the left side of the container.
Please provide some examples how to do it, I have no idea how to do it anymore.

Answer 1

using flexbox here is a way simpler code from yours
body {
margin: 0
}
.region {
border: solid;
padding: 50px 0
}
.actions {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
border: red solid;
padding: 10px;
}
.action {
flex: 0 140px;
height: 140px;
border: orange solid;
margin: 5px;
}
<div id="_technology_page" class="region">
<div class="actions_container">
<div class="actions">
<div class="action">
<a href="{{link}}">
<img src="/img/technology/grafiki/{{icon}}.png" alt="">
<p class="action_text">
</p>
</a>
</div>
<div class="action">
<a href="{{link}}">
<img src="/img/technology/grafiki/{{icon}}.png" alt="">
<p class="action_text">
</p>
</a>
</div>
<div class="action">
<a href="{{link}}">
<img src="/img/technology/grafiki/{{icon}}.png" alt="">
<p class="action_text">
</p>
</a>
</div>
<div class="action">
<a href="{{link}}">
<img src="/img/technology/grafiki/{{icon}}.png" alt="">
<p class="action_text">
</p>
</a>
</div>
<div class="action">
<a href="{{link}}">
<img src="/img/technology/grafiki/{{icon}}.png" alt="">
<p class="action_text">
</p>
</a>
</div>
<div class="action">
<a href="{{link}}">
<img src="/img/technology/grafiki/{{icon}}.png" alt="">
<p class="action_text">
</p>
</a>
</div>
<div class="action">
<a href="{{link}}">
<img src="/img/technology/grafiki/{{icon}}.png" alt="">
<p class="action_text">
</p>
</a>
</div>
</div>
</div>
</div>