css - 如何在 Bootstrap navbar-brand 类中垂直居中文本？

Question

我有一个带有一些文字的 Logo 。我希望文本垂直对齐到中间。

<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;
}

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

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

See JSFiddle

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

Answer 1

使用以下 CSS:

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

使用 display:flex而不是 display:inline-block .

Working Fiddle