Centering text in front of a horizontal rule

Question

I'm looking to build a progress bar that I will generate programmatically. I'm a css novice, at best. Here is what I have so far; using tips from this question.

Ideally, I would style the following simple HTML, but I'm open to adding more tags:

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

Two, maybe 3 issues:

Right now the "text over line" is accomplished by making the text white, on top of the line. This ends up cutting into the green background. To avoid this, I guess I need to have the text (without a background color) and lines on either side of it?
Obviously my formatting / margins / offsets are a mess, and the top of the box borders / hr alignment is not quite right (seems like the top text needs to be shifted up a couple pixels or the container down a couple pixels, but I'm having trouble doing this).

Thoughts on a cleaner solution that gets me where I want to be?

http://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-hr-like-line — Diodeus - James MacFarlane, Sep 10 '13 at 17:48
This has the same problem I identified in my first bullet. I essentially want a split background behind the text, not a solid color. — Lone Shepherd, Sep 10 '13 at 17:59
Although [this answer](http://stackoverflow.com/a/2812819/1392951) may have promise, it doesn't seem to allow the `
` portions to change width based on the width of the text. — Lone Shepherd, Sep 10 '13 at 18:12
I would do something like this: http://jsfiddle.net/QpWqd/42/ — Starx, Sep 10 '13 at 18:17

avrahamcool · Accepted Answer · 2013-09-10T19:54:56.377

1

I've created a working fiddle for you. http://jsfiddle.net/avrahamcool/QpWqd/46/

the main trick is to differ the white background and the text of the h2 elements, giving each a different z-index. both the background and the text are above the border. but the green background come between the white and the text.

so the layers are:

border
white background of h2 tag
green background
text

Tested on: IE10, FF, Chrome

edited Sep 10 '13 at 19:54

answered Sep 10 '13 at 19:49

avrahamcool

13,888
5
47
58

looks nice -- my only complaint would be that the text field size is fixed, regardless of text width, which can look a little funny (see http://jsfiddle.net/QpWqd/52/). I will have to fiddle with it some this evening, but pretty sure this will do it for me. I figured some sort of z-index would be needed. – Lone Shepherd Sep 10 '13 at 20:35
Its true. I fixed the `width` so I could center the text. their are other way to center the text without fixing the `width` but they require a specified margin. so I thought you would prefer this cleaner solution. – avrahamcool Sep 10 '13 at 20:40
I think the fixed width will probably be fine for my application, as I don't expect large variability in text width. – Lone Shepherd Sep 10 '13 at 20:43

Centering text in front of a horizontal rule

1 Answers1