Středění obrázků/divů v menších divech

Jak středit obrázky o kterých nevíte jak jsou velké a víte jen v jak velkém obalu je budete zobrazovat? Zde je návod a stačí k tomu jen CSS a trochu HTML.

Př.: obal 80x80 a mám obrázky 120x80 i 170x80 i 440x80 atd...

Středíme na šířku:

HTML část kódu:

CSS část kódu:

div.inner img {position: relative; left:-50%;}
div.outer {width: 300px; margin: 0 auto; overflow: hidden;}
div.inner {display: inline-block; position:relative; right: -50%;}

Ukázka: http://jsfiddle.net/NqdFj/

Středíme na výšku:

Zde to je obdobné jako šířky jen nevyužíváme "left" a "right", ale "top" (u img) a "bottom" (u obalu). Zde je někdy potřeba dodat ještě nějaký margin na doladění toho co z obrázku je vidět. Zkrátka a jednoduše nikdy nevíte co na těch obrázcích bude tak nelze říci posuvy o 50% jsou jediné správné.

<< zpět