如何在 Bootstrap 的导航栏品牌类中垂直居中文本？

Question

我有一个带有一些文字的标志。我希望文本与中间垂直对齐。

<a class="navbar-brand" href="foo"><img src="bar"/>FooBar</a>

navbar-brand 在 Bootstrap 中是这样定义的：

.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}

我尝试将图像与跨度中的文本包装在一起，并将其样式设置如下：

vertical-align: middle; 
display: inline-block;

见 JSFiddle

有人可以给我一个提示，我应该如何垂直居中文本？

Answer 1

使用以下css：

#foo {
    align-items: center;
    display: flex;
}

使用display:flex代替display:inline-block。

工作小提琴