html - 物化CSS : two lines in a button

Question

我正在使用 MaterializeCSS，我希望能够使按钮中的长文本显示在 2 行上而不是被截断。

这是一个清晰的例子: Demo

<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>juste change the panel size to see what i'm talking about</a>

我已经尝试更改 btn 类的“行高”属性。这工作得很好，但如果屏幕足够大，内容可以显示在一行上，文本和图标将粘在按钮的顶部，但我希望它们垂直居中。

有解决办法吗？ 谢谢!

Answer 1

您可以应用此样式来覆盖现有样式:

.btn.waves-effect {
    height: auto;
    min-height: 20px;
    line-height: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
}

您的示例已更新: http://jsfiddle.net/kgy6j0k5/3/

编辑:图标垂直居中

.btn.waves-effect {
    height: auto;
    min-height: 20px;
    line-height: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 50px;
}

.btn.waves-effect .material-icons {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -10px;
    margin-left: 0;
}