css - Materializecss 矩形网格 3x3

Question

卡在全屏 3x3 尺寸的矩形网格中。

这是一个布局:

这是我现在拥有的:https://jsfiddle.net/hbrnszns/ (Ctrl 点击)

这是CSS:

.rectangle {
    float: left;
    width: 100%;
    padding-bottom: 50%;
    margin: 1.66%;
    align-items: center;
    background-color: #00a388;
}

如何正确垂直对齐矩形中的内部图像，以及如何整体正确地对齐

Answer 1

使用您现有的布局，您可以使用绝对定位将图像放在中心。它是 position: absolute; 的组合。顶部:50%；左:50%；变换:翻译(-50%，-50%)；

.light-grass {
  background-color: #79bd8f;
}

.rectangle {
    width: 100%;
    padding-bottom: 50%;
    margin: 1.66%;
    align-items: center;
    background-color: #00a388;
    position: relative;
}

.rectangle > span {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet"/>
<div class="header">
	<nav class="light-grass z-depth-0" role="navigation">
	</nav>
</div>  

<div class="row">
  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>
  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>

  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>
</div>

<div class="row">
  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>
  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>

  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>
</div>

<div class="row">
  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>
  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>

  <div class="col s4">
    <div class="rectangle valign-wrapper">
      <span><img class="work-icon" src="http://placehold.it/100x40"></span>
    </div>
  </div>
</div>