Home-theater-designers
Jednou z prvních funkcí, o kterých se všichni vývojáři dozvěděli, když se zabývali zpracováním textu, bylo zarovnání textu. Tento malý nástroj byl zásadní pro profesionální sazeče i pro amatérské designéry letáků. Není překvapením, že CSS podporuje zarovnání textu, pokud jde o webový design.
The zarovnání textu property spolu s jedním nebo dvěma dalšími určuje, jak prvek horizontálně zarovná svůj text. Kromě základů prohlížeče pomalu implementují více specifikací, ale plná podpora se liší. Zjistěte, jak zarovnat text a jaké funkce dnes běžné prohlížeče podporují.
Základy vlastnosti zarovnání textu CSS
Zarovnání je jedním z nejznámějších typografických výrazů. V kontextu CSS zarovnání textu označuje horizontální zarovnání.
Horizontální zarovnání textu platí pouze pro blokové kontejnery. Jedná se o prvky s plnou šířkou, jako jsou odstavce a divy. Za použití zarovnání textu vlastnost na vloženém prvku, jako je v nebude mít žádný účinek. Můžete také zarovnat položky seznamu a buňky tabulky:
co je crc sha po kliknutí pravým tlačítkem
Ve výchozím nastavení se v jazyce zleva doprava (o tom později) zarovná text doleva:
V CSS je to stejné jako:
p { text-align: left; }Nebo:
p { text-align: start; }Příbuzný: Co jsou kaskádové styly a k čemu slouží CSS?
Pro. Můžete použít jiné hodnoty zarovnání textu vlastnost změnit vodorovné zarovnání. Nejběžnější hodnoty jsou známé z aplikací pro zpracování textu:
text-align: left
text-align: center
text-align: rightK zarovnání levého a pravého okraje použijte zdůvodnění
Další společná hodnota pro zarovnání textu je zdůvodnit . Prohlížeče přidávají do zarovnaného textu mezeru, aby se každý řádek rozšířil tak, aby vyplnil dostupné místo:
Při zarovnávání textu může být konečný řádek ošidný. Protože může být velmi krátký (možná jen jedno slovo), může být rozteč po celé šířce ošklivá. Ve výchozím nastavení zarovná i zarovnaný text poslední řádek doleva.
icloud, v tuto chvíli se nemůžete přihlásit
Někdy můžete chtít jiný efekt. Implementace prohlížeče dohánějí specifikace, ale jsou možné dva přístupy.
The ospravedlnit-vše hodnota by měla znamenat, že prohlížeče zacházejí s konečným řádkem jako se všemi ostatními a roztáhnou jej na celou šířku. V době psaní této zprávy však žádný prohlížeč tuto hodnotu nepodporuje. Můžeš zkontrolujte caniuse, abyste zjistili, zda ano když čtete tento článek.
Další vlastnost CSS, text-align-last , je flexibilnější a má lepší podporu. Můžete s ním zacházet víceméně stejně jako zarovnání textu , ale platí pouze pro poslední řádek:
Podpora prohlížeče pro tuto vlastnost je lepší, ale není dokonalá. Znovu, před použitím zkontrolujte caniuse . Pokud prohlížeč tuto vlastnost nerozpozná, bude ji ignorovat.
Zarovnání textu a směr čtení
Možná pracujete s jazykem, jako je arabština nebo hebrejština, který čte zprava doleva. CSS používá směr vlastnost, která to specifikuje, například:
direction: rtl;Tyto jazyky obvykle ve výchozím nastavení zarovnávají text doprava.
Místo nutnosti specifikovat vlevo, odjet / že jo , upřednostňovaný způsob zarovnání textu používá hodnoty Start a konec . Toto určuje, zda se má text seřadit na začátku každého řádku nebo na konci. V jazycích zleva doprava, Start je ekvivalentní vlevo, odjet . V jazyce zprava doleva text začíná vpravo a končí vlevo.
jak přesunout stránku ve Wordu
Použitím Start nebo konec znamená, že bez ohledu na směr textu je zarovnání konzistentní.
Jak prvky dědí vlastnost zarovnání textu
Měli byste si být vědomi toho, že zarovnání textu majetek dědí. Pokud ji například nastavíte na tělo prvek, bude platit pro každý prvek na stránce. Můžete jej samozřejmě přepsat na jakémkoli prvku.
Použití vlastnosti zarovnání textu k ovládání rozvržení
Můžete použít zarovnání textu Vlastnost CSS k definování toho, jak prohlížeče horizontálně rozkládají text. Nejběžnější hodnoty jsou vlevo, odjet , že jo , centrum , a zdůvodnit . Ty jsou však poměrně jednoduché zdůvodnit zavádí určitou složitost.
Zarovnání textu byste měli používat střídmě. Na billboardech a plakátech může být vhodné centrální zarovnání, ale může způsobit, že delší bloky textu budou špatně čitelné. Odůvodnění je obvykle čitelnější, pokud jsou řádky textu delší. Zarovnání krátkých sloupců textu může způsobit ošklivé mezery.
The zarovnání textu vlastnost je jednou z mnoha vlastností CSS, které poskytují užitečné formátování a základní umístění.
Podíl Podíl tweet E-mailem 10 jednoduchých příkladů kódu CSS, které se můžete naučit za 10 minutPotřebujete pomoc s CSS? Nejprve zkuste tyto základní příklady kódu CSS a poté je použijte na své vlastní webové stránky.
Číst dále Související témata- Programování
- Vývoj webu
- Webový design
- CSS
Bobby je technologický nadšenec, který pracoval jako vývojář softwaru po téměř dvě desetiletí. Je zapálený pro hraní her, pracuje jako editor recenzí časopisu Switch Player Magazine a je ponořen do všech aspektů online publikování a webového vývoje.
Více od Bobbyho JackaPřihlaste se k odběru našeho zpravodaje
Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!
Kliknutím sem se přihlásíte k odběru