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