Problem med vertical-align af td

Jeg har en popup side med en tabel med info om elever...

www.kimbang.dk/mc-e/dumpinfo.gif

Jeg kan ikke få teksten i det øverste (mørke) til at vertical-align : middle

Jeg har rettet telefon på billedet til det jeg går efter'ish... ;)

HTML;

<table class="main">
<tr>
  <td class="opl1">
  <img src="e_navn.gif" border="0"/>&nbsp;&nbsp;<% = data.Fields("navn")%>
  </td>
</tr>
<tr>
  <td class="opl1">
  <img src="e_adr.gif" border="0"/>&nbsp;&nbsp;<% = data.Fields("adresse")%>
  </td>
</tr>
<tr>
  <td class="opl1">
  <img src="e_blank.gif" border="0"/>&nbsp;&nbsp;<% = data.Fields("postnr")%>&nbsp;&nbsp;<% = data.Fields("postby")%>
  </td>
</tr>
<tr>
  <td class="opl1">
  <img src="e_tlf.gif" border="0"/>&nbsp;&nbsp;<% = data.Fields("telefon")%>
  </td>
</tr>
<tr>
  <td class="opl2">
  <br/>Saldo : <% = data.Fields("saldo")%><br/>
  Betalt d. <% = data.Fields("betaltdd")%><br/><br/>
 
  </td>
</tr>
</table>


CSS:

body {
  background-color : #DBE6EB;
}

a:link {
  color: #FFBB71;
  text-decoration:none;
}
a:visited {
  color: #FFBB71;
  text-decoration:none;
}
a:active {
  color: #FFBB71;
  text-decoration:underline;
}
a:hover {
  color: #FFBB71;
  text-decoration:underline;
}

.main {
  border-collapse: collapse;
  vertical-align:middle;
  font-family: sans-serif, verdana;
  font-size: 10px;
  color: black;
  width: 60%;
  height: 80%;
  border: 1px solid #5A8294;
}

.opl1 {
  background: #afc4cf;
  height: 22px;
  padding-left: 10px;
  vertical-align:middle;
  border-top: 1px solid black;
}

.opl2 {
  vertical-align:middle;
  background: #cC6d6de;
}


Hvordan får jeg vertical-align til at "bide på" ?