css - ブートストラップ プログレス バー内でテキストを縦に揃える方法

Question

次のリンクでわかるように、ブートストラップ プログレス バーの高さを変更しました: http://jsfiddle.net/8Xf2j/31/

私が作ろうとしているのは、テキストが垂直方向に中央に配置されることです。プロパティを追加しようとしました：

vertical-align:middle

しかし、うまくいきません...プログレスバーを含むテキストのフォントサイズを大きくしたい:

font-size:30px;

de fiddle でわかるように、それも機能しません。アイデアやアドバイスをいただければ幸いです。

Answer 1

テキストの 1 行の垂直方向の配置を実現する 1 つの方法はline-height、目的の高さに一致させることです。

例: http://jsfiddle.net/VQS2k/

.progress {
    height: 40px;
    font-size: 30px;
}
.bar {
    font-size: 30px;
    line-height: 40px;
}

プレーンバージョン (ブートストラップなし): http://jsfiddle.net/VQS2k/1/