Centreret billede

[Jørgen Farum Jensen]

Jeg har en boks på 300 pixel x 300 pixel.
I denne boks indlæses nogle billeder af
forskellig størrelse (slideshow).

Billederne bliver aldrig større end de
kan rummes i boksen.

Jeg kan let centrere billederne vandret
i boksen med text-align:center. Til lodret
centrering bruger jeg

#boks {
display:table-cell;
vertical-align:middle;
...
}

Men så duer det jo ikke i Internet Explorer,
der ikke implementerer tabel display-egenskaber.

Jeg har tænkt lidt over at bruge et array
med de enkelte billeders dimensioner og så
billede for billede regne ud hvor det skal
placeres. Men det lyder som en lidt kluntet
fremgangsmåde.

Har nogen hørt/læst om en lile JS gimmick,
der kan implementere display:table-cell?

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
.

[Martin]

Jørgen Farum Jensen wrote:
> Jeg har en boks på 300 pixel x 300 pixel.
> I denne boks indlæses nogle billeder af
> forskellig størrelse (slideshow).
>
> Billederne bliver aldrig større end de
> kan rummes i boksen.
>
> Jeg kan let centrere billederne vandret
> i boksen med text-align:center. Til lodret
> centrering bruger jeg
>
> #boks {
> display:table-cell;
> vertical-align:middle;
> ...
> }
>
> Men så duer det jo ikke i Internet Explorer,
> der ikke implementerer tabel display-egenskaber.
>
> Jeg har tænkt lidt over at bruge et array
> med de enkelte billeders dimensioner og så
> billede for billede regne ud hvor det skal
> placeres. Men det lyder som en lidt kluntet
> fremgangsmåde.
>
> Har nogen hørt/læst om en lile JS gimmick,
> der kan implementere display:table-cell?
>

Måske du skulle prøve Dean Edwards IE7.js som den nu hedder
<http://code.google.com/p/ie7-js/>

Får IE5-7 til at efterligne CSS2 standarden
Her er ihvertfald hvad der er fixet
<http://ie7-js.googlecode.com/svn/test/index.html>

[Martin]

Jørgen Farum Jensen wrote:
> Jeg har en boks på 300 pixel x 300 pixel.
> I denne boks indlæses nogle billeder af
> forskellig størrelse (slideshow).
>
> Billederne bliver aldrig større end de
> kan rummes i boksen.
>
> Jeg kan let centrere billederne vandret
> i boksen med text-align:center. Til lodret
> centrering bruger jeg
>
> #boks {
> display:table-cell;
> vertical-align:middle;
> ...
> }

Får at få IE til at efterligne dette, har du så prøvet
#boks {
display:inline;
height:100%;
}

Dette skulle eftersigne give samme resultat som display:table-cell

[Birger]

"Jørgen Farum Jensen" <jfje...@yahoo.dk> skrev i en meddelelse
news:487f1148$0$90272$1472...@news.sunsite.dk...

> Jeg har en boks på 300 pixel x 300 pixel.
> I denne boks indlæses nogle billeder af
> forskellig størrelse (slideshow).
>
> Billederne bliver aldrig større end de
> kan rummes i boksen.
>
> Jeg kan let centrere billederne vandret
> i boksen med text-align:center. Til lodret
> centrering bruger jeg
>
> #boks {
> display:table-cell;
> vertical-align:middle;
> ...
> }
>
> Men så duer det jo ikke i Internet Explorer,
> der ikke implementerer tabel display-egenskaber.
>
> Jeg har tænkt lidt over at bruge et array
> med de enkelte billeders dimensioner og så
> billede for billede regne ud hvor det skal
> placeres. Men det lyder som en lidt kluntet
> fremgangsmåde.
>
> Har nogen hørt/læst om en lile JS gimmick,
> der kan implementere display:table-cell?
>
> --
>

Umiddelbart, skulle en onload, der sætter en top-margin som halvdelen af
(den til rådighed værende minus billedet), på img-elementet kunne klare det?

pic_elm = document.getElementById( 'img-elm');
onload=" pic_elm.style.marginTop = .5*(300-pic_elm.offsetHeight;)+'px';)"

Har ikke testet..

Birger
-----
http://bbsorensen.dk
http://varmeretter.dk - hverdagsmad. Sundt, nemt, hurtigt og billigt. Daglig
opdatering.