text-center and Absolute Position

[grandpa]

I'm using absolute positioning to line up some form labels, and I would dearly love to center the text on each label.

Here's a small example of my positioning:
.Fr10 { position:absolute; top:120px; left: 240px; }

The left position is the left edge of my label. I've tried adding text-align:center to the code, but it's a no-go. The text that I'm trying to center gets pulled from a database... not that that matters. I've been mulling this over for days and can't see my way clear. How to define the left edge of the label (as far as I know it must be absolute positioned) and then center the text. Am I dreaming?

FWIW, I've toyed with a few things, including trying to determine the length of the text (it does vary) and using   to pad from the left. It a poor solution that barely works.

Any suggestions?

[iamlost]

Try wrapping the label and input in a <p> and formatting the <p>:

Note: When using absolute positioning there are problems when the label is wider than the input box.

Note: validated as xhtml 1.0 strict - the " />" close brackets not used with HTML 4.01.

CSS:

p {position: absolute; left: 240px; text-align: center;}

.label-1 {top: 120px;}
.label-2 {top: 170px;}
.label-3 {top: 220px;}

HTML:

<form action="" method="post">
<p class="label-1">
<label for="firstname">First Name:</label>
<br />
<input type="text" id="firstname" />
</p>
<p class="label-2">
<label for="lastname">Last Name:</label>
<br />
<input type="text" id="lastname" />
</p>
<p class="label-3">
<label for="email">E-Mail:</label>
<br />
<input type="text" id="email" />
</p>
</form>

[Moby_Dim]

Label is inline element. You may turn'em in blocks (dispaly:block), and text-align should work in this case. But you'll have labels over corresponding input fields in this case (pretty nice too btw). Use float then if you want to have'em in the same row with inputs.

[grandpa]

It appears that I'm still having a problem. Here's a code snippet that might shed some light. I've adapted the first example.

The CSS:
p {position: absolute; left: 0px; text-align: center;}
.lbl1 {top:0px; left: 1px; font-weight:bold;}
.lbl2 {top:0px; left: 220px; font-weight:bold;}
.lbl3 {top:0px; left: 460px; font-weight:bold;}
.lbl4 {top:0px; left: 710px; font-weight:bold;}
.lbl5 {top:55px; left: 1px; font-weight:bold;}
.lbl6 {top:55px; left: 220px; font-weight:bold;}
.lbl7 {top:55px; left: 460px; font-weight:bold;}
.lbl8 {top:55px; left: 710px; font-weight:bold;}

The objective:
if ($PrintOnce)
{
$sel = $_POST["Selected"];
$str = $_POST["StartPos"];
$sel = strtoupper($sel);
echo "<p class=lbl$str>$sel</p>";
exit;
}

Or more simply put: <p class=lbl$str>$sel</p> where $str represents 1 thru 8.

$sel contains a widget description, up to about 20 characters, to be centered on a label. The label I want to print is on a pre-formatted form.
$str contains the number to determine which label is printed. Everything prints in the correct location but will not center on the label, instead it sticks to the left like... grmmmmble... works great for images...