html - 水平线前的居中文本

Question

我希望构建一个我将以编程方式生成的进度条。我充其量是一个CSS新手。 Here是我到目前为止所拥有的；使用 this question 中的提示.

理想情况下，我会为以下简单的 HTML 设置样式，但我愿意添加更多标签:

<div id="container">
<h2><span>Goal</span></h2>
<div id="bgblock"></div>
    <h2><span>So Far</span></h2>
</div>

两个，也许是 3 个问题:

• 现在，“行上文字”是通过将行上的文本设为白色来实现的。这最终会切入绿色背景。为了避免这种情况，我想我需要在它的两边都有文本(没有背景颜色)和线条？
• 显然，我的格式/边距/偏移量一团糟，并且框边框的顶部/小时对齐方式不太正确(似乎顶部文本需要向上移动几个像素或容器向下移动几个像素，但我在这样做时遇到了麻烦)。

有没有想过一个更清洁的解决方案，让我到达我想去的地方？

Answer 1

我已经为您创建了一个可用的 fiddle 。 http://jsfiddle.net/avrahamcool/QpWqd/46/

主要技巧是区分白色背景和 h2 元素的文本，为每个元素提供不同的 z-index。背景和文字都在边框上方。但是绿色背景介于白色和文本之间。

所以图层是:

1. 边框
2. h2标签的白色背景
3. 绿色背景
4. 正文

测试于: IE10、FF、Chrome