html - Materializecss - 垂直对齐表单/集合

Question

我想像这样垂直对齐我的集合(表单):

我尝试使用 valign-wrapper 和 valign，但它不起作用: 代码:

<div class="row">
<div class="container">
<h3 class="col s12">Matériel</h3>
<div class="col s12 l6">
<img src="img/camera.png" alt="Canon EOS 700D" class="responsive-img" data-caption="CANON EOS 700D" />
</div>
<div class="col s12 l6 valign-wrapper">
<ul class="collection with-header">
<li class="collection-header"><h4>Canon EOS 700D</h4></li>
<li class="collection-item">Résolution de capteur : 18.5Mégapixels</li>
<li class="collection-item">Ecran tactile 7.7"</li>
<li class="collection-item">Objectif 18-55 Mm IS STM 18 Mpix</li>
</ul>
</div>
</div>
</div>

有人知道如何做到这一点吗？

PS1:我正在使用 Materializecss

PS2:抱歉我的英语不好!

Answer 1

Codepen

确保在使用 valign-wrapper 助手时将其放在包装容器上。因此，如果您想将您的集合以图像的高度为中心，您可以将类添加到包含这两个元素的 div。在此代码笔中，我稍微简化了您的结构并将 valign-wrapper 添加到该行。

此外，一般来说，您要确保您的 col div 是您的 row div 的直接子级。

<div class="row container valign-wrapper">
  <div class="col s12 l6">
    <h3>Matériel</h3>
    <img src="http://placehold.it/1000x800" alt="Canon EOS 700D" class="responsive-img" data-caption="CANON EOS 700D" />
  </div>
  <div class="col s12 l6">
    <ul class="collection with-header">
      <li class="collection-header"><h4>Canon EOS 700D</h4></li>
      <li class="collection-item">Résolution de capteur : 18.5Mégapixels</li>
      <li class="collection-item">Ecran tactile 7.7"</li>
      <li class="collection-item">Objectif 18-55 Mm IS STM 18 Mpix</li>
    </ul>
  </div>
</div>