Absázky nebo obsah buněk tabulek můžete zarovnat podle svých přání pomocí následujících vlastností. Tyto vlastnosti lze použít i na všechny ostatní prvky, které mají přiřazenou definovanou nebo vypočtenou výšku nebo šířku.
Odsazení prvního řádku
Začínáme vlastností text-indent. Tímto způsobem určíte, jak má být odsazen první řádek odstavce. Možné je také odsazení doleva. K tomu je třeba použít negativní hodnotu text-indent. (Podrobné informace o tom, kdy může být extrémní odsazení užitečné, následují). Očekává se číselná hodnota.
Příklad:
.odstavec { text-indent: 2em; }
V prohlížeči to vypadá takto:
Pokud použijete negativní hodnotu, dojde k odsazení textu v prvním řádku.
.odstavec {
text-indent: -2em;
}
A zde je příklad výsledku v prohlížeči:
Pokud však chceme, aby byl text stále dostupný pro vyhledávače, ocitneme se před dilematem. To lze vyřešit použitím vlastnosti text-indent. Tato vlastnost vám totiž umožňuje posunout texty. Takže můžete texty vymanit z očí návštěvníků.
Výhoda variace text-indent: Text, který má být nahrazen obrázkem, zůstává v kódu nezměněn.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Tímto zápisem se h1 elementu přiřadí pozadí. (Vlastnost background byla v této řadě již představena). Pomocí text-indent: -99999px se text nadpisu posune o 99999 pixelů doleva. Text se tedy již nezobrazuje. Zobrazen je pouze obrázek.
Pokud se vypne stylopis, text se opět zobrazí normálně.
Nastavení výšky řádku
O výšce řádku jsem již jednou hovořil v souvislosti s obecnou vlastností font. Nyní se budeme více zabývat tímto tématem. Definice výšky řádku v souvislosti se velikostí písma (font-size) je zajímavá.
Výška řádku se určuje pomocí vlastnosti line-height. Povoleny jsou číselné hodnoty. Procentuální hodnoty jsou rovněž možné. Ty se vztahují k velikosti písma prvku, pro který byla výška řádku uvedena. Před definicí výšky řádku si také pamatujte na následující: Může se stát, že prohlížeč/nebo zařízení poskytne výšce řádku přednost před jinými vlastnostmi a prvky zobrazí oříznuté, pokud jsou vyšší. To může být nežádoucí zejména u obrázků. Proto otestujte výsledky, než zveřejníte stránku online.
Následující příklad ukazuje, jak použít vlastnost line-height.
<p style="line-height:1.4em; font-size:1em;">Někdy můžete vytvořit skvělé rozložení, ale stále chybí fotografie, a když použijete pouze prázdné rámce, rozložení vypadá docela holohlavě. Existuje lepší řešení:<br /> V tomto videu vám ukážu nejlepší webové adresy, kde rychle získáte zdarma odpovídající obrázkové zástupce. Skvělý seznam najdete např. zde <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">zde</a>.</p> <p style="line-height:2em;font-size:1em;">Někdy můžete vytvořit skvělé rozložení, ale stále chybí fotografie, a když použijete pouze prázdné rámce, rozložení vypadá docela holohlavě. Existuje lepší řešení:<br /> V tomto videu vám ukážu nejlepší webové adresy, kde rychle získáte zdarma odpovídající obrázkové zástupce. Skvělý seznam najdete např. zde <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">zde</a>.</p> <p style="line-height:1em; font-size:1em;">Někdy můžete vytvořit skvělé rozložení, ale stále chybí fotografie, a když použijete pouze prázdné rámce, rozložení vypadá docela holohlavě. Existuje lepší řešení:<br /> V tomto videu vám ukážu nejlepší webové adresy, kde rychle získáte zdarma odpovídající obrázkové zástupce. Skvělý seznam najdete např. zde <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">zde</a>.</p>
Zde byly definovány tři odstavce textu, kterým byly přiděleny různé řádkové výšky.
Jak vidíte, řádková výška může velmi silně ovlivnit čitelnost běžných textů. Proto buďte opatrní s line-height.
Jde samozřejmě o to, jaká řádková výška by měla být zvolena. Obvykle se pohybujeme v rozmezí řádkových výšek mezi 130 a 150 procenty.
p {
line-height: 150%;
}
Nicméně dobrá čitelnost závisí především na šířce písma. Zde platí: Řádková výška by měla být co největší, čím delší jsou textové řádky. Určitě tedy otestujte stránku, zda je čitelnost zachována.
Vodorovné zarovnání textu
Pomocí vlastnosti text-align se nastavuje vodorovné zarovnání odstavců a jiných prvků obsahujících běžný text nebo vnořené prvky blokových prvků. Pro vlastnost text-align lze nastavit následující hodnoty:
• left – zarovnání vlevo
• right – zarovnání vpravo
• center – zarovnané na střed
• justify – zarovnat do bloku
Zde je opět ukázka:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>A vypadá to ve webovém prohlížeči takto:
Pamatujte, že text-align se nevztahuje pouze na textové obsahy. Tato vlastnost platí skutečně pro všechny vnořené prvky. Takže pokud je vloženo obrázek, platí definice text-align i pro tento prvek.
Poznámka: text-align by se podle oficiální specifikace CSS nemělo ovlivňovat blokové prvky. (I když existují prohlížeče, které ho používají i na blokové prvky). Pokud chcete zarovnat blokové prvky, v těchto případech použijte již představené vlastnosti margin.
