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

ここにフィドルがあります http://jsfiddle.net/fSa6r/

ありがとう。

Answer 1

line-height: 50px;.btn-blue クラスに追加し、

vertical-align: middle;アイコンクラスに

フィドル

必要なテキストが 1 行だけの場合、line-height をボックスの高さに設定するのが、テキストを垂直方向に中央揃えにする最も簡単な方法であることがわかりました。