内联块中的显示元素取决于节宽

Question

我已经尝试了一段时间来做一些类似的事情。

元素（。元素）下降但它们没有居中但是向左移动。

我的代码现在是：

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

我尝试了很多东西，搜索示例，僵尸程序没有任何效果，因为我希望它可以工作。

另外，我试图在Bootstrap网格系统上进行此操作，但这些元素仍然粘在容器的左侧。

请提供一些如何操作的示例，我不知道该怎么做。

Answer 1

在这里使用flexbox是一种更简单的代码

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>