作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 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 类的“行高”属性。这工作得很好,但如果屏幕足够大,内容可以显示在一行上,文本和图标将粘在按钮的顶部,但我希望它们垂直居中。
有解决办法吗?谢谢!
最佳答案
您可以应用此样式来覆盖现有样式:
.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;
}
关于html - 物化CSS : two lines in a button,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32741516/
我是一名优秀的程序员,十分优秀!