在MaterialiseCSS行中居中对齐项目

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

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

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

Answer 2

Materialize CSS在一个网格中有12列。您可以使用偏移量从左侧或起点跳过任何数量的列。

<div class="col s6 offset-s6"><span class="flow-text">6-columns (offset-by-6)</span></div>

Answer 3

我之前从未使用过materializecss，但是它的网格系统就像我熟悉的bootSrap一样。

materializecss有12列网格系统，你每个div设置6列，每行超过12列，尝试每个设置4，所以它们均匀放置。

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

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

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

    <div class="col s4 center-align" id="extra-pic-container">
      <img id="extra-pic" width="100%" src="http://via.placeholder.com/350x150">
    </div>

    <div class="col s4 center-align" id="extra-pic-container">
      <img id="extra-pic" width="100%" src="http://via.placeholder.com/350x150">
    </div>

    <div class="col s4 center-align" id="extra-pic-container">
      <img id="extra-pic" width="100%" src="http://via.placeholder.com/350x150">
    </div>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

另一方面，如果你只有3个div，但每个只有s2，这意味着你的填充6列和6个，你只需要偏移第一个div一半的金额是3。

＆＃13;

＆＃13;

.row {
  border: 1px solid;
  /* To see the effect */
}

.container>.row>div {
  height: 100px;
}

.container>.row>div:nth-child(1) {
  background-color: red;
}

.container>.row>div:nth-child(2) {
  background-color: blue;
}

.container>.row>div:nth-child(3) {
  background-color: orange;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

<div class="container">

  <div class="row">

    <div class="col s2 offset-s3" id="extra-pic-container">
    </div>
    <div class="col s2" id="extra-pic-container">
    </div>
    <div class="col s2 " id="extra-pic-container">
    </div>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

在col.div上，您需要设置：

float: none;
margin: 0 aut;