html - Materializecss-垂直对齐形式/集合

我想这样垂直对齐我的集合（窗体）：


我试图使用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：对不起，我的英语不好！

最佳答案

Codepen

确保在使用valign-wrapper帮助程序时，将其放在包装容器上。因此，如果要将集合的中心放在图像的高度，则可以将类添加到包含这两个元素的div中。在此Codepen中，我稍微简化了您的结构，并在行中添加了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>