Vertical alignment i en raekke i en tabel.

Jeg soeger hjaelp til at faa indholdet af cellerne i en tabel-raekke til at flugte vertikalt, midt med midt.  Her er et screenshot af raekken:  http://poststamp.dk/pictures/Row1.gif .

Indholdet under AREA og COUNTRY bestaar af en image, den blaa pil, og et gult span med tekst.  Indholdet under DISTRICT og STOCK-No er en enkel image (selv om de ser ud til at bestaa af to elementer,) og indholdet under BASKET er en image.

Jeg vil gerne have billedet under BASKET ned saa midten flugter med midten af de andre imager.  Ivrige observatoerer vil se at midten af de gule tekster netop ikke flugter med midten af pilene.  Det vil jeg ogsaa gerne have bragt i orden.

I denne screenshot http://poststamp.dk/pictures/Row2.gif har jeg lavet raekken bredere for at vise at imagen under BASKET i princippet sidder midt i raekken men lidt for hoejt.  Det er som om systemet tilfoejer noget padding under billedet.  Jeg lavede billedet ved med Screenhunter at skaere det ud af noget andet og jeg tilfoejede ikke nogen plads eller padding under.

I koden som jeg viser nedenunder har jeg givet de blaa pile under AREA og COUNTRY css egenskaben text-align:bottom (class='bottom'.)  Hvis jeg undlader det saa flyttes de gule tekster en anelse ned hvorimod de blaa pile bliver siddende.  Det forstaar jeg intet af, men i dette screenshot har jeg fjernet class='bottom' fra pilen under COUNTRY: http://poststamp.dk/pictures/Row3.gif .  Ellers har jeg ikke brugt css egenskaber til vertical alignment (men jeg har afproevet alt med vertical-align top/midt/bottom og text-top/text-midt/text/bottom.)

Jeg vil ogsaa gerne goere raekken smallere, men den tvinges til den nyvaerende bredde af billedet under BASKET.

Saa tre spoergsmaal:  (1)  Hvordan faar jeg billedet under BASKET til at flugte med resten?  (2)  Hvordan faar jeg de gule tekster til at flugte med de blaa pile (midt flugte med midt?)  (3) Hvordan faar jeg raekken gjort smallere?


Her er koden for raekken:


//Second row
echo "<tr>";
echo "<td class='center'><img class='bottom' src='iconer/arrow.gif' /><span class='yellow'>$area</span></td>";
echo "<td class='center'><img class='bottom' src='iconer/arrow.gif' /><span class='yellow'>$country</span></td>";

echo "<td class='center'>";
echo "<img id='choseDistrict' src='iconer/chose.gif' onMouseOver = 'setVisibleDistrict()' />";
echo "</td>";
echo "<td>&nbsp</td><td>&nbsp;</td><td>&nbsp;</td>";
echo "<td class='center'>";
echo "<img id='chose' src='iconer/chose.gif' onMouseOver = 'setVisibleStock()' />";
echo "</td>";
echo "<td>&nbsp;</td>";
echo "<td class='center'>";
if($_SESSION['basketFull'] == "TRUE")
{
  echo "<form action='districtViewBasketAlt.php' method='POST'>";
  echo "<input id='openBasket' type='image' height='40' src='iconer/fullBasket.gif' alt='View basket' />";
  echo "</form>";
}
echo "</td>";
echo "<tr/>";