Avatar billede fckmax Nybegynder
12. marts 2010 - 13:10 Der er 2 kommentarer og
1 løsning

Vertical centrering af billede og tekst -HTML/CSS

Hej

jeg har et problem med en søgeresultatliste.
Hvert resultat bliver vist i en table med to datasæt,
i den ene er billedet og den anden er teksten.

Mit problem er at jeg skal have billedet til at lægge præcist i midten af tabellen, som er 120px høj. Billedet er 60x60px, dvs. at
billedet skal påbegyndes 30px nede for at kunne være i midten.
Tekstens første linie skal påbegyndes lige så langt nede som billedet, således at toppen af billede og skrift "flugter".

Her er koden som jeg har nu, hvor billede og teksten er lidt for højt oppe, der er altså mere luft under end over:

<table class="doubleHeightResult" border="0">
  <tr valign="top" class="..." onmouseover="..."
    onmouseout="..." onclick="goToURL('...');">
          <td width="80px">
            <br /><br />
            <img src="..." width="60px" height="60px" />
    </td>
       
    <td width="420px">
            <br /><br />
            <b>Overskrift</b>
        <span style="float: right;">Højrestillet  tekst&nbsp;</span>
            <br />
            Adresse
            <br />
            <br />
            Postnummer
            &nbsp;Bynavn&nbsp;-&nbsp;Landenavn<br />
            <br /><br />
            </td>
</table>

css:
.doubleHeightResult
{
    height:120px;
}

Mvh Max
Avatar billede fckmax Nybegynder
12. marts 2010 - 14:14 #1
Jeg har forresten rodet lidt med vertical-align:middle;
men kan heller ikke få det til at virke..
Avatar billede FrederikBache Nybegynder
13. marts 2010 - 21:48 #2
Fjern dine <br> tags og din css regel om højden og sæt i stedet:

.doubleHeightResult td{
  padding:30px 0;
}

Så får du 30px luft over og under billedet. Din tabel vil dog blive højere end 120px hvis teksten i højre kollone er over 60px.
Avatar billede fckmax Nybegynder
13. marts 2010 - 23:57 #3
Tak for hjælpen, det var helt perfekt!! :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester