インラインブロックの表示要素はセクションの幅に依存します

Question

私は画像のようなことをしばらく試してみました。

要素（.element）は停止しますが、中央には収まらず左にスティックします。

私のコードは以下のようになります。

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

私は検索の例は、私が好きなボット何も動作、多くのことを試してみましたそれは動作する。

また、私はブートストラップグリッドシステムでそれをやろうとしましたが、これらの要素はまだコンテナの左側に貼り付けられています。

これを行う方法の例を教えてください。私はもうそれをやり直す方法はわかりません。ここflexboxを使用して

Answer 1

あなた

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>