Avatar billede alex15 Nybegynder
25. juni 2008 - 19:34 Der er 5 kommentarer og
1 løsning

Centering af billede

Hej eksperter

Står og er i gang med at lave et billede galleri. Og heunder vil jeg gerne centerer et billede både vertikalt og horisontalt.

boksen hvor billede er inde i, ser således ud:

.boks
{
    float:right;
    padding:0px 0px 0px 0px;
    width:150px;
    height:112px;
        text-align:center;
        vertical-align:middle;
}

<div class="boks">
    <img src="billeder/test.jpg" />
</div>

Og resultatet skal virke i IE, FF og Safari.

Lige pt. centerer den kun billede horisontalt nemlig.

Nogle som ved hvad jeg kan gøre?

Med venlig hilsen

Alex
Avatar billede keysersoze Ekspert
25. juni 2008 - 19:44 #1
Hvis du kender højden på billedet så er dette en mulighed http://web-dev.dk/post/2007/12/Absolut-centrering-af-hjemmeside-med-layers.aspx - hvis ikke så har du et problem :)
Avatar billede alex15 Nybegynder
25. juni 2008 - 19:54 #2
Kender desværre ikke højden af billede. Ellers kunne man jo bare have ordnet det via noget padding!
Avatar billede alex15 Nybegynder
25. juni 2008 - 20:41 #3
Problem løst:

//Henter højde og brede på billede
list($widht, $height, $type, $attr) = getimagesize($filename);

//Henter hvor meget px. der er fra toppen af billede til toppen af boksen.
<?php if($height < 113){$top = (112 - $height) / 2;} ?>

//Retter padding til at være den bestemte højde.
<div class="boks" style="padding:<?php echo "$top"; ?>px 0px <?php echo "$top"; ?>px 0px;">

På den måde regner med ud hvor stor padding skal være både i bunden og højden.

Med venlig hilsen

Alex
Avatar billede mclemens Nybegynder
25. juni 2008 - 21:15 #4
^- Såfremt man gør det med serverside scripting og
ikke DHTML - CSS som spørgsmålet er oprettet i ...

Alternativet til Keyser's forslag er at bruge css'en
fra spørger men bruge et table element istedet:

<table class="boks"><tr><td><img src="billeder/test.jpg" /></td></tr></table>
Avatar billede alex15 Nybegynder
25. juni 2008 - 21:58 #5
Ja okay. Grunden til at jeg lagde spørgsmålet i CSS delen var fordi at jeg regnede med at det var der som svaret på mit spørgsmål skulle ligge. :o)

Men tak for hjælpen alligevel.
Avatar billede mclemens Nybegynder
25. juni 2008 - 22:46 #6
- Jepper :o) ... Valgte bare lige at kaste det sidste forslag, hvis nu
nogen senere sidder i samme problem uden serverside script tilgængelig.
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