CSS vertical positioning

Hi,

I have a chart which needs some text positioned vertically central on top of a background image of a circle.

The chart is all built and working perfectly, it is simply the vertical positioning of the text for the question sections which needs finalising.

The question text is to be positioned 'inside' circles.

I've made two circle backgrounds to accomodate this and have added them to the css here . . .


.scircle{
background: url(../chart_images/smallcircle.gif) no-repeat;
}

.lcircle{
background: url(../chart_images/largecircle.gif) no-repeat;
}


The class 'scircle' is the small circle image for smaller questions, and the class 'lcircle' is the larger circle image for the few longer questions.


I now need the text in the question sections to be vertically and horizontally aligned using css so that they fit 'into' the circles please. Please don't use fixed pixel/em amounts of padding or margins for vertical alignment as this isn't going to accommodate the various lengths of questions without adding a load of css. A more elegant css solution is required please. Using fixed amounts in the horizontal positioning is fine.

Please only change the charts.css file and the index.html file to do this; nothing else.

Also, please only apply the new styles to the following two test sections of the chart only, and I'll then replicate them as and where else necessary . . .


section1 : http://goo.gl/zjX5u

section5 : http://goo.gl/93QAb


I am looking for a minimal amount of css (and html if necessary) to be changed/added to the sylesheet to complete this task.

I need this done by tomorrow morning.

Can you do it?