Please, help me vertically fit text into an inner DIV

[pamelafluente]

Hello experts,

I need some help to do in a proper way what I am doing. I have some
"cells" in a web page. Each "cell" is made of 2 DIV. One is inside the
other.
Example with 2 "cells" :

<div class=c7bg style="top:202px;left:585px;width:55px;height:30px ;">
<div class=c7fg style="top:7px;left:2px;">
<table><tr>
<td width=49px height=14px valign=middle>SHIPVIA</td>
</tr>
</table>
</div>
</div>
<div class=c6bg style="top:202px;left:643px;width:80px;height:30px ;">
<div class=c6fg style="top:7px;left:2px;">
<table><tr>
<td width=74px height=14px valign=middle>EMPLOYEEID</td>
</tr>
</table>
</div>
</div>
where these are the styles

<style type="text/css" media="screen">

..c6bg{position:absolute;background:#B8860B;border-width:1px;border-style:outset;}
..c6fg{position:absolute;border-width:0;color:#FFFFFF;background:transparent;text-align:center;font-family:Tahoma;font-size:11px;font-weight:bold;}
..c7bg{position:absolute;background:#DAA520;border-width:1px;border-style:outset;}
..c7fg{position:absolute;border-width:0;color:#FFFFFF;background:transparent;text-align:center;font-family:Tahoma;font-size:11px;font-weight:bold;}

</style>

The outer DIV represents the "background" of the cell, while the
inner (with background:transparent) represents
the "foreground".
The foreground needs to be sometimes vertically centered
(valign=middle). Some other times it needs to be Top or Bottom. I did
that using a <TABLE>.

** Question ***

I feel I am not doing this right. In particular I would like to get
rid of that ridiculous table thingy

<table><tr>
<td ... valign=middle>text</td>
</tr>
</table>

and still to be able to vertically center/top/bottom the text.

How can transform this poor code in some nice CSS? I need actual code
suggestions which work with Firefox and IE, at least. Thanks

If you see other things that are wrong please do advise.

-P