Materializecss垂直整列形式/コレクション

Question

私が垂直に希望はこのように私のコレクション（フォーム）を揃える：

私はのvalign-ラッパーとの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

画像に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 2

Codepen

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

そのコードを試してみてください。それはあなたがvalign-wrapperヘルパーあなたを使用している際に確認してくださいOffsets

Answer 3

Codepen

の下にここでそれについての詳細を読むことができますCOL col s6 offset-s6

を使用して6列に垂直方向の長さを右にあなたのコンテナを移動し、設定します包装容器に入れてください。コレクションの中心を画像の高さに合わせたい場合は、その両方の要素を含む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>