Zarovnání obrázku a textu
Obrázky lze také s omezenými možnostmi zarovnávat vzhledem k okolnímu textu, který
obrázek obtéká. Jelikož standardní HTML nepodporuje takové možnosti formátování jako
standardní textový editor, neočekávejte žádné zázraky. Jedná se pouze o základní zarovnání,
které je dosaženo následujícím parametrem ALIGN (stejný parametr jako u zarovnání
odstavců) značky IMG:
_ left – Obrázek je umístěn zcela vlevo a je obtékán textem z pravé strany. Jakmile
je dosaženo spodního okraje obrázku, pokračuje text zleva doprava na celou šíři
okna prohlížeče.
_ right – Obrázek je umístěn zcela vpravo a je obtékán textem z levé strany. Jakmile
je dosaženo spodního okraje obrázku, pokračuje text zleva doprava na celou šíři
okna prohlížeče.
_ texttop – Zarovná horní okraj obrázku s nejvyšším písmenem v řádku, u něhož je
umístěn.
_ top – Zarovná horní okraj obrázku s nejvyšším prvkem (většinou písmenem – tehdy
je zarovnání stejné jako u předchozí hodnoty texttop) v řádku, u něhož je
umístěn.
_ middle – Zarovná linku, na níž je posazen text, na střed daného obrázku.
_ absmiddle – Zarovná prostředek daného řádku na střed obrázku.
_ bottom – Zarovná spodní okraj obrázku s linkou, na níž je posazen text.
_ absbottom – Zarovná spodní okraj obrázku s nejspodnějším písmenem v textu,
tedy písmena, které je posazeno pod linkou (např. j,p,y).
Standardně je v prohlížeči navoleno zarovnání bottom, tedy spodní okraj obrázku s daným
řádkem, dále pak text pokračuje pod obrázkem normálně. Většinou se používá zarovnání
left nebo right, aby text obrázky hezky obtékal. Způsob obtékání vidíte na následujícím
příkladu.
Jednoduché zobrazení obrázku v HTML

Toto je obrázek zarovnán doleva a text jej obtéká zprava po
celé jeho výšce. Je potřeba jej umístit tam, kde bude
začínat obtékání, většinou tedy k začátku odstavce. Jakmile
text dosáhne spodního okraje obrázku, pokračuje dále od
levého okraje okna.

Toto je také obrázek zarovnán doleva a text jej obtéká
zprava po celé jeho výšce.

Text začne obrázek obtékat po umístění značky IMG do
zdrojového textu, což v praxi vypadá takto.

Podobně pracuje prohlížeč s textem, pokud je obrázek zarovnán doprava, viz příklad.

Toto je obrázek zarovnán doprava a text jej obtéká zleva po
celé jeho výšce. Je potřeba jej umístit tam, kde bude
začínat obtékání, většinou tedy k začátku odstavce. Jakmile
text dosáhne spodního okraje obrázku, pokračuje pod
obrázkem až k pravému okraji okna.

Toto je také obrázek zarovnán doprava a text jej obtéká
zleva po celé jeho výšce.

Text začne obrázek obtékat po umístění značky IMG do zdrojového
textu, což v praxi vypadá takto.