在多個Div上集中文本？

我有一個百分比欄，我試圖把一些文字放在它的前面。在多個Div上集中文本？

我的例子是這樣做的，但它集中在較小的酒吧，而不是完整的東西。

我的問題：我怎樣才能得到「測試」一詞在整個酒吧，而不僅僅是內部較小的一個。

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

（用於酒吧的cheesiness道歉。我想爲它找一個體面向上的動畫，所以任何建議表示歡迎）

來源

2013-03-20 Cully

有可能是一個更好的辦法，但這個工程：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-20 21:55:27 greener

我已經走了這一個，因爲它似乎最適合我。非常感謝！ – Cully 2013-03-21 06:47:13

這是因爲你的內部酒吧有width:55%的偏差nt div（div.bar1）。要麼給它一個完整的寬度，將文本放到中心位置，要麼將文本放在外面。

你也可以用position:absolute

玩看到這個fiddle

來源

2013-03-20 21:52:15

使用'位置：absolute'需要'位置：relative'上含'div'，否則它是絕對到'body' – greener 2013-03-20 22:00:25

是啊..偉大，你指出:) – 2013-03-20 22:02:29

你可以水平居中兒童div與margin: 0 auto：

來源

2013-03-20 21:58:13 FelipeAls

這使得難以看到的實際百分比居中。感謝您的幫助，但我把它在這裏的答案排序。 – Cully 2013-03-21 06:50:34

在多個Div上集中文本？

回答

相關問題