将图标置于文本中心？

Question

帮助！我无法弄清楚如何将图标与导航栏中的文本对齐，而不会将div中的其余文本按下。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Hungus Bungus <i class="material-icons">polymer</i></a>
    </div> <!-- other divs are closed below -->

CodePen：https://codepen.io/hungus--bungus/pen/rdgEze?editors=1100

Answer 1

您可以在.navbar-brand上使用flex，如下所示：

.navbar-brand {
  display: flex;
  align-items: center;  
}