Materializecss - Вертикальная форма Align/коллекция

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>

Попробуйте этот код. он перемещает контейнер вправо и устанавливает вертикальную длину 6 колонок с использованием седловины col s6 offset-s6

Вы можете прочитать об этом здесь под Offsets

Answer 3

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>