1

パーセンテージ バーがあり、その前にテキストを配置しようとしています。

私の例はそれを行いますが、全体ではなく、小さなバーを中心にしています。

私の質問:内側の小さいバーだけでなく、バ​​ー全体の中央に「テスト」という単語を配置するにはどうすればよいですか。

HTML

<div id="bar1">
<div style="width:55%; text-align:center;">test</div>
</div>

CSS

#bar1 {
  background-color: black;
  border-radius: 13px; /* (height of inner div) / 2 + padding */
  padding: 3px;
  } 

#bar1 div 
{
    background-color: green;
    height: 20px;   
    border-radius: 10px;
    -webkit-background-size:50px 50px;
    background-image:
        -webkit-repeating-radial-gradient(center, circle, green, #00BB00 40%, green 80%);
        -webkit-animation:upbar 3s linear infinite;
}

@-webkit-keyframes upbar
{
    0%{background-position:0 0}
    100%{background-position:0px -100px}
}

（バーの安っぽさをお詫びします。適切な上向きのアニメーションを見つけようとしているので、どんな提案も歓迎します）

4

3 に答える 3

1

おそらくもっと良い方法がありますが、これはうまくいきます：http: //jsfiddle.net/SFHft/

で秒divを使用してくださいposition:absolute：

<div id="bar1">
    <div class="anim" style="width:55%;"></div>
    <div class="text">TEST</div>
</div>

#bar1 div.anim 
{
    background-color: green;
    height: 20px;   
    border-radius: 10px;
    -webkit-background-size:50px 50px;
    background-image:
        -webkit-repeating-radial-gradient(center, circle, green, #00BB00 40%, green 80%);
        -webkit-animation:upbar 3s linear infinite;
}

#bar1 div.text 
{
    text-align:center;
    position:absolute;
    color:#fff;
    top: 3px;
    left: 50%;
    width: 100px;
    margin-left: -50px;
}
于 2013-03-20T21:55:27.757 に答える
1

div次の方法で、子を水平方向に中央揃えできますmargin: 0 auto。

于 2013-03-20T21:58:13.723 に答える
1

これは、内側のバーにwidth:55%親 div( div.bar1) があるためです。全幅にしてテキストを中央に配置するか、テキストを外側に配置します。

で遊ぶこともできますposition:absolute

このフィドルを参照してください

于 2013-03-20T21:52:15.243 に答える