以居中的两个div重叠文本 [英] Overlapping text over two divs centered
问题描述
我正在尝试修改代码以做一些不同的事情,但是我无法使其正常工作。这是代码:
I'm trying to modified a code to do something a bit different but I can't get it to work. This is the code:
<div id="progress-bar" class="all-rounded">
<div id="progress-bar-percentage" class="all-rounded" style="width: 88%">88/100</div>
</div>
这会呈现:
使用此CSS:
.all-rounded {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.spacer {
display: block;
}
#progress-bar {
width: 100px;
background: #cccccc;
}
#progress-bar-percentage {
background: #3063A5;
padding: 5px 0px;
color: #FFF;
text-align: center;
}
您会看到 88/100 文本印在内部div progress-bar-precentage
内,因此相对于该div居中,这是如果 progress-bar-precentage
宽度很小,文本会不合适,我的想法是相对于div progress-bar
居中对齐,因此始终不管内部div到位,但我不知道如何将文本放在顶部和中心,有任何想法吗?
As you can see the text 88/100 is printed inside the inner div progress-bar-precentage
so is centered relative to this div, the problem with this is if progress-bar-precentage
width is very small the text will be out of place, my idea is to center it relative to the outter div progress-bar
so it will always be in place regardless of the inner div, but i have no idea how to put the text on top and center, any ideas?
推荐答案
尝试一下- 演示
Try this - DEMO
HTML
HTML
<div id="progress-bar" class="all-rounded">
<div id="progress-bar-percentage" class="all-rounded" style="width: 68%"><span>68/100</span></div>
</div>
CSS
CSS
#progress-bar {
width: 100px;
background: #cccccc;
position: relative;
}
#progress-bar-percentage {
background: #3063A5;
padding: 5px 0px;
color: #FFF;
text-align: center;
height: 20px;
}
#progress-bar-percentage span {
display: inline-block;
position: absolute;
width: 100%;
left: 0;
}
这篇关于以居中的两个div重叠文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!