Hogyan lehet valamit egzaktul a böngésző közepére helyezni? Lásd alább

A képeket tudod arányosan méretezni. Úgy, hogy az egyik kiterjedésüket aránytartóan igazítani fogja a másikhoz.

Ha mondjuk 960px-esre tervezed a képed szélességét, és 16px a betűméreted, akkor célszerű 60em-re állítani a kép szélességét.

img

{

width: 60em;

height: auto;

}

Így a magasságot aránytartóan igazítani fogja. Például egy 300*156 os kép mérete így a végleges weboldalon 60em*31.2em lesz, vagyis 960*499 képpont. Ezt már gond nélkül tudod középre igazítani vízszintesen, mert a szélessége kötött. A magassággal is megtehető ugyanez, csak ritkán van értelme/haszna. Természetesen ha neked az kell, hogy mondjuk 100 képpont széles legyen a kép, akkor a 60em helyett 100px-et adsz meg és kész.

display: table;-val is meg lehet oldani

<style type="text/css">

.image-container {

display: table;

}

.image-container > .image-holder {

display: table-cell;

vertical-align: middle;

margin: 0 auto;

}

</style>

<div class="image-container">

<div class="image-holder">

<img src="..." />

</div>

</div>

Ez IE8 alatt nem fog működni.

Nem kell fix szélességet megadni: megadható százalékos szélesség is, ha a kép egy display:block elemen belül van. Sőt, sokkal optimálisabban meglehet így oldani, mint a te megoldásoddal, mert nagy monitoron nem érdems 960px-nél szélesebbre nyújtani az oldalt. Annyit kell megoldani, hogy ha 960px-nél keskenyebb az oldal, akkor össze kell zsugorítani, illetve ha túl kicsit a kijelző, akkor a többoszlops elrendezést egy oszlopban kell megjeleníteni. (pl telefonok kijelzőjén).

A táblázatos elrendezéssel nagyon komplikált, vagy szinte lehetetlen egy rendes reszponzív oldal elkészítése.