Center-Align 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>

Answer 2

我以前没用过materializecss，不过感觉他们的grid系统和我熟悉的bootSrap一模一样

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

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

另一方面，在网格布局中将项目居中，如果你只有 3 个 div，但每个只有 s2，这意味着你填充 6 列，剩下 6 列，你只必须将第一个 div 偏移量的一半，即 3.

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

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

Answer 3

在col.div你需要设置：

float: none;
margin: 0 aut;

Answer 4

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

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

Center-Align MaterializeCSS 行中的项目

Center-Align Items In MaterializeCSS Row

html

css

materialize