Umístění položek na webových stránkách je nezbytné pro jejich celkový návrh. Ačkoli existují jiné způsoby, jak ovlivnit uspořádání, například použití tabulek ( které nedoporučujeme ), je nejlepší použít CSS .
Níže se podíváme na to, jak používat jednoduchou vlastnost in-line ve stylu CSS pro zarovnání obrázků, tabulek, odstavců a dalších.
Poznámka: Stejné metody lze použít také na externích stylových listech, ale protože se vztahují na jednotlivé položky a pravděpodobně je třeba zůstat tak, je nejlepší použít in-line styling, jako je to, co je uvedeno níže.
Zarovnat odstavce textu
Značka odstavce je prvním místem, ve kterém se můžete začít vykládat svou webovou stránku. Otevření a zavírání tagů vypadá takto:
Výchozí zarovnání textu v odstavci je na levé straně stránky, ale také můžete zarovnat odstavce vpravo a uprostřed.
Pomocí vlastnosti float můžete zarovnat odstavce vpravo nebo vlevo nad nadřazeným prvkem. Veškeré další prvky uvnitř tohoto nadřazeného prvku budou proudit kolem elementu floated.
Chcete-li získat nejlepší efekt s odstavcem, je nejlepší nastavit šířku na odstavci, která je menší než prvek kontejneru (nadřazený).
Zarovnejte text uvnitř oddílů
Pravděpodobně nejzajímavější zarovnání pro text odstavce je "ospravedlnit", což řekne prohlížeči, aby zobrazoval text zarovnaný v podstatě na pravou i levou stranu okna.
Chcete-li ospravedlnit text v odstavci, použijete vlastnost text-align.
Můžete také zarovnat celý text uvnitř odstavce na pravou nebo levou (výchozí) pomocí vlastnosti text-align.
Vlastnost text-align zarovná text uvnitř prvku. Technicky se nejedná o zarovnání obrázků obsažených uvnitř odstavce nebo jiného prvku, ale většina prohlížečů považuje obrázky za inline pro tuto vlastnost.
Zarovnání obrázků
Pomocí vlastností float na značce obrázku můžete definovat umístění obrázků na stránce a způsob, jakým se text obklopí.
Stejně jako výše uvedené odstavce vlastnost floatového stylu ve značce obrázků umístí obrázek na stránku a řekne prohlížeču, jak proudit text a další prvky kolem tohoto obrázku.
Text, který následuje po výše uvedené značce obrázku, bude procházet kolem obrázku vpravo, jakmile se obrázek zobrazí na levé straně obrazovky.
Pokud chci, aby text přestal obtékat obraz, používám tuto vlastnost:
Zarovnání více bodů
Co když však chcete zarovnat více než jen odstavec nebo obrázek? Můžete jednoduše umístit vlastnost stylu do každého odstavce, ale existuje značka, kterou můžete použít, která je účinnější:
Jednoduše obklopujte text a obrázky (včetně značek HTML ) se značkou a vlastností stylu (float nebo text-align) a vše v této divizi bude zarovnáno tak, jak by se vám to líbilo.
Mějte na paměti, že zarovnání přidaná k odstavcům nebo obrazům v rámci divize bude respektována, čímž se vymaže značka.