Center label vertically in table - css

Question

I'm trying to create a layout with 4 small images and a label centered vertically, the label could have multiple lines. The label sits on top of and obscures the images. The label will be dynamically toggled.
I have done this with divs or tables but run into the same problem. Here is my table version as close as I can get:
p.label
{
position: absolute;
background: black;
color:white;
font-weight: bold;
text-align:center;
bottom:50%;
margin:0;
word-wrap: break-word;
}
table.groupbox
{
position:relative;
}
<table class="groupbox" cellspacing=0 cellpadding=0>
<tr>
<td><p class="label">two line<br>label</p>
<img src="A.jpg" height=80 width=80></td>
<td><img src="B.jpg" height=80 width=80></td>
</tr>
<tr>
<td><img src="C.jpg" height=80 width=80></td>
<td><img src="D.jpg" height=80 width=80></td>
</tr>
</table>
This correctly has the label spanning the full table, but it puts the bottom edge of the label at the vertical center. If I change the label's margin to something like this:
margin: 0 0 -20px 0;
I can hand center the label, but it won't work for different size labels.
Two Answers
The answers by Nathan Manousos and Rob W both seem to work well.

Answer 1

This piece of code will produce a square with a 160x160 size. You can adjust the width and height to your wishes.
CSS:
.groupbox, .groupbox .label-container {
width: 160px;
height: 160px;
}
.groupbox {
position: relative;
}
.groupbox .label-container {
display: table;
position: absolute;
}
.groupbox .A, .groupbox .B, .groupbox .C, .groupbox .D{
width: 50%;
height: 50%;
background-position: center;
position: absolute;
background-repeat: no-repeat;
}
.groupbox .A{background-image:url("A.jpg");top:0;left:0;}
.groupbox .B{background-image:url("B.jpg");top:0;right:0;}
.groupbox .C{background-image:url("C.jpg");bottom:0;left:0;}
.groupbox .D{background-image:url("D.jpg");bottom:0;right:0;}
.groupbox .label {
display: table-cell;
text-align: center;
vertical-align: middle;
}
HTML:
<div class="groupbox">
<div class="A"></div><div class="B"></div>
<div class="C"></div><div class="D"></div>
<div class="label-container">
<div class="label">Any text<br />With multiple lines</div>
</div>
</div>
Final edit
Keep in mind that background should be a background. The text should not become unreadable because of the background. To accomplish this, you can create a 1x1 transparent image:
.groupbox .label-container {
background:url("transparent.png") repeat transparent;
}
You can also use background-color:rgba(1,1,1,0.2) where 0.2 is the transparency level (0=invisible, 1=fully visible). This CSS attrbute is available for FF 3+, Chrome, Safari 3+, Opera 10+ and IE 9+.

Answer 2

Okay, based on the updated diagram, here is a solution that requires knowing the height of the whole box.
Here it is in action: http://jsfiddle.net/raySU/
CSS:
*{margin:0;padding:0;}
#wrap{width:200px; height:200px; position:relative;}
#wrap #images{position:absolute;}
#wrap #images img{float:left;}
#wrap #label{position:absolute; width:200px; height:200px;}
#wrap #label table{width:100%; height:100%;}
#wrap #label p{background-color:#eee;}
HTML:
<div id="wrap">
<div id="images">
<img src="http://placekitten.com/100" width="100" height="100" />
<img src="http://placekitten.com/100" width="100" height="100" />
<img src="http://placekitten.com/100" width="100" height="100" />
<img src="http://placekitten.com/100" width="100" height="100" />
</div>
<div id="label">
<table cellspacing="0" cellpadding="0">
<tr>
<td valign="center">
<p>This is my label here isnt it great yes it is</p>
</td>
</tr>
</table>
</div>
</div>

Answer 3

If you add a container around your table, you should be able to do this pretty easily.
<div class="container">
<table class="groupbox" cellspacing=0 cellpadding=0>
<tr>
<td>
<p class="label">two line<br>label</p>
<img src="A.jpg" height=80 width=80>
</td>
<td><img src="B.jpg" height=80 width=80></td>
</tr>
<tr>
<td><img src="C.jpg" height=80 width=80></td>
<td><img src="D.jpg" height=80 width=80></td>
</tr>
</table>
<p class="label">Your text here</p>
</div>
.container {
position: relative;
float: left; }
.label {
position: absolute;
top: 50%;
right: 0;
height: 18px; /* fixed height */
margin: -9px 0 0; }