Anzeigeelemente in einem Inline-Block hängen von der Abschnittsbreite ab

Question

Ich habe seit einiger Zeit versucht, so etwas wie auf dem Bild zu machen.

Elemente (.element) gehen aus, aber sie sind nicht zentriert, sondern bleiben links.

jetzt Mein Code ist:

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; 
       } 
      } 
     } 
    } 
} 

ich viele Dinge ausprobiert haben, suchen Beispiele, bot nichts funktioniert, wie ich will es funktioniert.

Auch ich habe versucht, es auf Bootstrap Grid-System zu tun, aber diese Elemente sind immer noch auf der linken Seite des Containers stecken.

Bitte geben Sie einige Beispiele, wie es geht, ich habe keine Ahnung, wie es weiter geht.

Answer 1

mit flexbox hier ist ein Weg, einfacher Code von Ihnen

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>