如何在Bootstrap进度条中垂直对齐文本

Question

我修改了Bootstrap进度条的高度，如下链接所示： http://jsfiddle.net/8Xf2j/31/ 我想让文本垂直居中。我尝试添加属性：

vertical-align:middle

但它不起作用...我还想增加包含进度条的文本的字体大小，添加：

font-size:30px;

正如您在示例中看到的那样，它并不起作用。欢迎提出任何想法或建议。

- mllamazares

Answer 1

实现单行文本的垂直居中对齐的一种方法是使 line-height 与所需高度匹配。

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

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

简单版（没有Bootstrap）： http://jsfiddle.net/VQS2k/1/

- Tim M.

---

好的，非常感谢！但是字体大小在您输入的fiddle上无法正常工作。 - mllamazares

字体大小被Bootstrap样式覆盖了。我只是制作了一个简单版本，这样你就可以看到了。 - Tim M.

请注意，如果您使用此技术，它仅适用于文本不换行的情况。 - cimmanon

@cimmanon - 是的，我发现它主要适用于开发者定义的文本（例如按钮上的文本）而不是用户输入。 - Tim M.