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

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

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

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

Answer 1

使用以下css：

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

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

Answer 2

如果跨浏览器兼容性是旧浏览器必须的，那么显示表方法可能值得一看。真的很喜欢Ketan的答案。

所有需要的是文本周围的附加标签，如下所示：

<强> HTML：

<span id="foo">
      <img src="http://radiofair.eu/downloads/images/foobar.png"/>      
  <span>FooBar</span>
</span>

<强> CSS：

#foo{
  display: table;
  color: red;  
}

#foo span{ 
  display:table-cell;
  vertical-align:middle;
}