MaterializeCSS 行中的居中对齐项目

Question

我正在尝试在使用MaterializeCSS库创建的行中对齐容器。 文档似乎没有提到任何关于已经在行内的居中对象的内容，所以我想我会在这里问。

当前代码：

<div class="container" style="width: 88%;height: 100%;max-width: 100%;margin: auto;">

<div class="row" style="width: 100%;height: 100%;">

    <div class="col s6 center-align" id="extra-pic-container">
        <img id="extra-pic" width="100%" src="img1.png">
    </div>

    <div class="col s6 center-align" id="extra-pic-container">
        <img id="extra-pic" width="100%" src="img2.png">
    </div>

    <div class="col s6 center-align" id="extra-pic-container">
        <img id="extra-pic" width="100%" src="img3.png">
    </div>

</div>

这是它目前的样子：

我想要什么（草图）：

是否有任何可以执行的 CSS 魔法来实现这一点？

非常感激。

Answer 1

您可以考虑使用弹性盒技术

.flexbox {
  display: flex;
  flew-wrap: wrap;
  justify-content: center;
  align-items: center;
}

<div class="container" style="width: 88%;height: 100%;max-width: 100%;margin: auto;">

  <div class="row" style="width: 100%;height: 100%;">

    <div class="flexbox">

      <div class="col s6 center-align" id="extra-pic-container">
        <img id="extra-pic" width="100%" src="img1.png">
      </div>

      <div class="col s6 center-align" id="extra-pic-container">
        <img id="extra-pic" width="100%" src="img2.png">
      </div>

      <div class="col s6 center-align" id="extra-pic-container">
        <img id="extra-pic" width="100%" src="img3.png">
      </div>
    </div>

  </div>