html - 使用 css 垂直对齐文本

Question

将蓝色框中的文本垂直居中的最佳方式是什么？

标记:

<div class="btn-blue">
  <span class="icon"></span>
  Some awesome text here
</div>

和样式:

.btn-blue {
  background-color: #446598;
  color: #fff;
  display: inline-block;
  padding: 0 20px 0 0;
  line-height: 0;
}

.btn-blue .icon {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: #00356b;
  margin-right: 10px;
}

这是 fiddle http://jsfiddle.net/fSa6r/

谢谢。

Answer 1

添加 line-height: 50px; 到 .btn-blue 类和

vertical-align: middle; 到图标类

FIDDLE

当只需要一行文本时，我发现将行高设置为框的高度是使文本垂直居中的最简单方法。