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

那是因为你的内栏有width:55%父 div( div.bar1)。要么给它一个全宽，把文本带到中心，要么把你的文本放在外面。

你也可以玩position:absolute

看到这个小提琴

于 2013-03-20T21:52:15.243 回答
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 回答