Question

我有一个百分比栏，我试图在它的前面放一些文字。

我的例子是这样做的，但它以较小的条形为中心，而不是完整的东西。

我的问题：我怎样才能得到“＃34; test＆＃34;以整个酒吧为中心，而不仅仅是内部较小的酒吧。

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}
}

（为酒吧的俗气道歉。我试图找到一个体面的向上动画，所以欢迎任何建议）

Answer 1

那是因为你的内栏有父div（width:55%）的div.bar1。或者给它一个完整的宽度，将文本带到中心，或者将文本放在外面。

你也可以玩position:absolute

请参阅此fiddle

Answer 2

可能有更好的方法，但这有效：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;
}

Answer 3

您可以使用 div 水平居中儿童margin: 0 auto：

将文本居中置于多个Div之上？

3 个答案: