uib-progressbarテキストを中央揃えとして

Question

センターテキストの整列方法はありますか？uib-progressbarです。私はposition:absoluteをやってみました。しかし、私はUIグリッドでプログレスバーのリストを表示したかったのです。スクロール可能なコンテンツです。テキストはスクロールしたままで、進行状況バーは正しくスクロールします。

テンプレート

<uib-progressbar animate="false" value="30"> 
    <span class="content">30% (3/10)</span> 
</uib-progressbar> 

スタイル

.progress-bar .content { 
    white-space: nowrap; 
    position: absolute; 
    left: 23vh; /* will vary according to alignment */ 
} 

Answer 1

あなたのCSSクラスここでは 'コンテンツ' を提供することはできますか？

ただし、値に関係なく、「30％（3/10）」のテキストをプログレスバーの中央に配置したいとします。

以下のようなあなたの進行状況バーにCSSクラスを追加します。

.progress { 
     position: relative; 
    } 

.progress span { 
    position: absolute; 
    display: block; 
    width: 100%; 
    color: black; 
} 

をし、あなたのコードは次のようにする必要があります：

<uib-progressbar animate="false" value="30" class="progress"> 
    <span class="content">30% (3/10)</span> 
</uib-progressbar> 

私は同じのためJSBinを作成しました。 これは動作するはずです。