如何将按钮内容与引导程序垂直对齐 4.

Question

我在我的应用程序中使用了引导程序 4 和材质图标。问题是当我有一个同时带有文本和图标的按钮时。

.button-icon {
  vertical-align: middle;
}

<button class="button-icon">
    <i class="material-icons">account_box</i>
    My Account
</button>

我尝试更改图标的字体大小，但这会破坏整个页面中其他图标的大小。

我只是想让文本与图标一起行居中。感谢您的任何帮助。

Answer 1

一种方法是使用Flexbox实用程序类，在这种情况下.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">