Materialisecss - 垂直对齐表单/集合

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：我正在使用Materialisecss

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>

Answer 2

将style="vertical-align:middle"添加到您的图片中。

<img src="img/camera.png" style="vertical-align:middle" alt="Canon EOS 700D" class="responsive-img" data-caption="CANON EOS 700D" />

Answer 3

Codepen

＆＃13;

＆＃13;

 <div class="row">
<div class="col s6 offset-s6 valign-wrapper collection">
<ul class="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>

＆＃13;

＆＃13;

＆＃13;

尝试该代码。它将容器移动到右侧，并使用col col s6 offset-s6

将垂直长度设置为6列

您可以在Offsets

下阅读更多相关信息