在MaterializeCSS中并排垂直对齐一列

Question

在这个例子中，你通常如何垂直对齐按钮的"中间"：

<div class="row">
<div class="col s1">
<h1>Foo</h1>
</div>
<div class="col s11 right-align">
<a href="#" class="btn"><i class="material-icons left">add</i> Add</a>
</div>
</div>

https://jsfiddle.net/zg9cjmr3/

一旦我在第二个内部div中添加valign-wrapper，它就会变得一团糟：

https://jsfiddle.net/zg9cjmr3/1/

Answer 1

将valign-wrapper类添加到行中。

<div class="row valign-wrapper">
<div class="col s1">
<h1>Foo</h1>
</div>
<div class="col s11 right-align">
<a href="#" class="btn"><i class="material-icons left">add</i> Add</a>
</div>
</div>