Garth

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




Nejnovější články

Jak udělat stín bloku pouze na jedné straně?

CSS - Úvod do CSS

Jak detekovat klik na tlačítka myšy?

JavaScript - Úvod do JavaScriptu

Jak udělat odkaz na celý řádek tabulky?

JavaScript - Příklady v JavaScriptu

Jak zrušit tečky kolem odkazu?

CSS - Základy CSS

Jak fungují lomítka a tečky v url adrese?

(x) HTML - Úvod do HTML