如何增加Bootstrap进度条的字体大小并居中文本？

如何轻松增加进度条内文本的字体大小？垂直居中文本？如何增加Bootstrap进度条的字体大小并居中文本？

<div class="progressBarModal"> 
    <div class="progress"> 
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="100" aria-valuemax="100" style="width:100%"> 
     this should be huge 
    </div> 
    </div> 
</div>

Example on Bootply

来源

2016-04-12 d4rty

像这样.progress-bar {font-size：22px;} –

添加了覆盖默认的字体大小在引导

http://www.bootply.com/BmGzxifuk9

来源

2016-04-12 10:51:07 overlord1234

看起来不错，但有还有一个问题。我怎样才能让文字居中？目前，您的解决方案将文本放在进度条的中心。 – d4rty

使用文本对齐：中心 –

已经尝试过这一点，不起作用。 [bootply]（http://www.bootply.com/yd7SkwiWZ8） – d4rty

使用下面的HTML

<div class="progressBarModal"> 
    <div class="progress" style="height:30px"> 
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="100" 
    aria-valuemax="100" style="width:100%; font-size: xx-large;"> 
     this shoul be huge 
    </div> 
    </div> 
</div>

来源

2016-04-12 10:48:32

你可以在课上像你一样设置 –

我知道但是在这里我展示了如何解决问题而不是如何管理代码 –

<div class="progressBarModal"> 
    <div class="progress" style="height:30px"> 
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="100" aria-valuemax="100" style="width:100%; font-size: xx-large;"> 
     this shoul be huge 
    </div> 
    </div> 
</div>

一个新的类

检查此bootply。

来源

2016-04-12 11:05:44

像重载1234一样的方法。另外我怎样才能垂直居中文本？ – d4rty

如何增加Bootstrap进度条的字体大小并居中文本？

回答

相关问题