html - MaterializeCSS 行中的居中对齐元素

Question

我正在尝试对齐使用 MaterializeCSS 创建的行中的容器图书馆。 The documentation似乎没有提及任何关于已在行内的居中对象的内容，所以我想我会在这里问。

当前代码:

<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

可以考虑使用flex box技术

.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>