我在我的应用程序中使用 bootstrap 4 和 Material 图标。问题是当我有一个同时包含文本和图标的按钮时。
.button-icon {
vertical-align: middle;
}
<button class="button-icon">
<i class="material-icons">account_box</i>
My Account
</button>
我试过更改图标的字体大小,但这会影响整个页面中其他图标的大小。
我只是想让文本与图标居中。感谢您的帮助。
最佳答案
一种方法是使用 Flexbox utility类,.d-flex .align-items-center
在这种情况下。
<button class="btn button-icon d-flex align-items-center">
<i class="material-icons">account_box</i>
My Account
</button>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
关于html - 如何使用 bootstrap 4 垂直对齐按钮内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48492915/