MaterializeCSS：按钮在页脚内部不垂直对齐（但输入字段可以对齐）

Question

如果我在Materialize.css valign-wrapper中将.btn与.page-footer一起使用，则它不会垂直对齐。例如，以下html：

<footer class="page-footer">
    <div class="valign-wrapper row col 12" id="rowContainer">
        <div class="col s12">
            <button class="btn btn-block waves-effect waves-light light-blue" type="submit" name="action">btn1</button>
        </div>
</footer>

产生：

注意：在我的样式表中，我有：

.btn-block
{
    width: 100%;
}

使具有.btn-block类的按钮适合其容器的宽度。

如果我将按钮替换为.input-field，则一切都会按预期进行（即在页脚中垂直对齐）。例如：

<footer class="page-footer">
    <div class="valign-wrapper row col 12" id="rowContainer">
        <div class="input-field col s12">
            <input placeholder="Input1" type="text" class="center-align">
        </div>
</footer>

产生：

为什么会发生这种情况，如何垂直对齐按钮？据我了解，.valign-wrapper应该为我这样做。

注意，在我的实际应用中，我在页脚中添加了几个按钮；这就是为什么我使用具有指定列数的.row类。

Answer 1

如果我对您的理解正确，您正在尝试垂直对齐按钮？您可以在页脚中的每个实例之后添加一个换行符。

Answer 2

好，我明白了。我也遇到了在Materialize中垂直对齐div中某些内容的问题。解决方法可能很乏味，但可以尝试这样的操作。