Umiestnenie položiek na webovej stránke je nevyhnutné pre jej celkový návrh. Hoci existujú iné spôsoby, ako ovplyvniť rozloženie, napríklad používať tabuľky ( ktoré neodporúčame ), najlepšie je použiť CSS .
Nižšie sa pozrieme na to, ako použiť jednoduchú in-line vlastnosť štýlu CSS na zarovnanie obrázkov, tabuliek, odsekov a ďalších.
Poznámka: Tieto rovnaké metódy je možné použiť aj na externých štýlových listoch, ale keďže sa vzťahujú na jednotlivé položky a pravdepodobne musia zostať tak, je najlepšie použiť inline styling, ako je uvedené nižšie.
Zarovnať body textu
Značka odstavca je prvým miestom, kde môžete začať s umiestňovaním vašej webovej stránky. Otváracie a zatváracie tagy vyzerajú takto:
Predvolené zarovnanie textu v odseku sa nachádza na ľavej strane stránky, ale môžete tiež zarovnať svoje body vpravo a v strede.
Použitím vlastností float môžete zarovnať odstavce vpravo alebo vľavo nad nadradeným prvkom. Akékoľvek iné prvky vnútri tohto nadradeného prvku budú pretekať okolo floated elementu.
Ak chcete dosiahnuť najlepší účinok pomocou odseku, najlepšie je nastaviť šírku odseku, ktorý je menší ako prvok kontajnera (nadradený).
Zarovnajte text v odsekoch
Pravdepodobne najzaujímavejšie zarovnanie textu odseku je "ospravedlniť", ktoré informuje prehliadač, aby zobrazil text zarovnaný v podstate tak na pravú aj ľavú stranu okna.
Ak chcete odôvodniť text v odseku, použite vlastnosť text-align.
Môžete tiež zarovnať celý text v odseku na pravú alebo ľavú stranu (predvolené) pomocou vlastnosti text-align.
Vlastnosť zarovnania textu zarovná text vnútri elementu. Z technického hľadiska nie je potrebné zarovnávať obrazy, ktoré sú obsiahnuté v odseku alebo inom prvku, ale väčšina prehliadačov považuje obrázky za inline pre túto vlastnosť.
Zarovnanie obrázkov
Použitím vlastnosti float na značke obrázka môžete definovať umiestnenie obrázkov na stránke a spôsob, akým sa text obklopí.
Rovnako ako vyššie uvedené odstavce, vlastnosť floatového štýlu v značke obrázka umiestni obrázok na stránku a povie prehliadaču, ako prúdiť text a ďalšie prvky okolo tohto obrázka.
Text, ktorý nasleduje po vyššie uvedenej značke obrázka, bude pretekať okolo obrázka doprava, keď sa obrázok zobrazí na ľavej strane obrazovky.
Ak chcem, aby sa text zastavil obklopením obrazu, používam jasnú vlastnosť:
Zarovnanie viac ako odsekov
Čo však, ak chcete zarovnať viac ako iba odsek alebo obrázok? Môžete jednoducho dať vlastnosť štýlu v každom odseku, ale existuje značka, ktorú môžete použiť, ktorá je efektívnejšia:
Jednoducho obklopujte text a obrázky (vrátane značiek HTML ) so značkou a vlastnosťou štýlu (float alebo text-align) a všetko v tejto divízii bude zarovnané tak, ako by ste chceli.
Majte na pamäti, že zarovnanie pridané do odsekov alebo obrázkov v rámci divízie bude udelené, čím sa ruší značka.