Zarovnajte veci pomocou vlastnosti Zarovnať text CSS

Zarovnajte veci pomocou vlastnosti Zarovnať text CSS

Jednou z prvých funkcií, o ktorých sa všetci vývojári dozvedeli, keď sa zaoberali spracovaním textu, bolo zarovnanie textu. Tento malý nástroj bol zásadný pre profesionálnych sadzačov aj pre amatérskych dizajnérov letákov. Nie je prekvapením, že CSS podporuje zarovnanie textu, pokiaľ ide o webový design.





The zarovnanie textu property spolu s jednou alebo dvoma ďalšími riadi, ako prvok horizontálne zarovná svoj text. Okrem základov prehliadače pomaly implementujú ďalšie špecifikácie, ale plná podpora sa líši. Zistite, ako zarovnať text a aké funkcie dnes bežné prehliadače podporujú.





Základy vlastnosti CSS zarovnania textu

Zarovnanie je jedným z najznámejších typografických výrazov. V kontexte CSS zarovnanie textu označuje horizontálne zarovnanie.





Horizontálne zarovnanie textu sa týka iba blokových kontajnerov. Ide o prvky v plnej šírke, ako sú odseky a div. Pomocou zarovnanie textu vlastnosť na vloženom prvku, ako napr v nebude mať žiadny účinok. Môžete tiež zarovnať položky zoznamu a bunky tabuľky:

e -maily neprichádzajú prostredníctvom tabletu

V predvolenom nastavení je text v jazyku zľava doprava (o tom neskôr) zarovnaný doľava:



V CSS je to rovnaké ako:

p { text-align: left; }

Alebo:





p { text-align: start; }

Súvisiace: Čo sú to kaskádové štýly a na čo sa používa CSS?

Na hodnotu zarovnanie textu vlastnosť zmeniť horizontálne zarovnanie. Najbežnejšie hodnoty sú známe z aplikácií na spracovanie textu:





text-align: left
text-align: center
text-align: right

Na zarovnanie ľavého a pravého okraja použite zdôvodnenie

Ďalšou spoločnou hodnotou pre zarovnanie textu je ospravedlniť . Prehliadače pridávajú medzeru do odôvodneného textu, aby sa každý riadok rozšíril tak, aby vyplnil dostupné miesto:

Keď odôvodňujete text, konečný riadok môže byť zložitý. Pretože môže byť veľmi krátky (možno iba jedno slovo), medzery po celej šírke môžu byť škaredé. Štandardne dokonca zarovnaný text zarovná posledný riadok doľava.

čo je vyrovnávacia pamäť v mojom telefóne

Niekedy môžete chcieť iný efekt. Implementácie prehliadača síce doháňajú špecifikácie, ale sú možné dva prístupy.

The ospravedlniť-všetko hodnota by mala znamenať, že prehliadače zaobchádzajú s konečným riadkom ako so všetkými ostatnými a roztiahnu ho na celú šírku. V čase písania tejto správy však žiadny prehliadač túto hodnotu nepodporuje. Môžeš skontrolujte, či to dokáže keď čítate tento článok.

Ďalšia vlastnosť CSS, text-align-last , je flexibilnejší a má lepšiu podporu. Môžete s ním zaobchádzať viac -menej rovnako zarovnanie textu , ale platí iba pre posledný riadok:

Podpora prehliadača pre túto vlastnosť je lepšia, ale nie dokonalá. Opäť skôr, ako ho použijete, skontrolujte ho . Ak prehliadač túto vlastnosť nerozpozná, bude ju ignorovať.

Zarovnanie textu a smer čítania

Možno pracujete s jazykom, ako je arabčina alebo hebrejčina, ktorý číta sprava doľava. CSS používa príponu smer vlastnosť, ktorá to špecifikuje, napríklad:

direction: rtl;

Tieto jazyky zvyčajne predvolene zarovnávajú text doprava.

Namiesto toho, aby ste museli špecifikovať vľavo / správny , preferovaný spôsob zarovnania textu používa hodnoty začať a koniec . Toto určuje, či sa má text zoradiť na začiatku každého riadka alebo na konci. V jazykoch zľava doprava, začať je ekvivalentné vľavo . V jazyku sprava doľava sa text začína vpravo a končí vľavo.

ako nájsť zmazané správy na facebooku

Použitím začať alebo koniec znamená, že bez ohľadu na smer textu je zarovnanie konzistentné.

Ako prvky dedia vlastnosť zarovnania textu

Mali by ste si byť vedomí toho, že zarovnanie textu majetok dedí. Ak ho napríklad nastavíte na telo prvok, bude sa vzťahovať na každý prvok na stránke. Môžete to, samozrejme, prepísať na akomkoľvek prvku.

Použitie vlastnosti zarovnania textu na ovládanie rozloženia

Môžete použiť zarovnanie textu Vlastnosť CSS na definovanie horizontálneho rozloženia textu v prehliadačoch. Najbežnejšie hodnoty sú vľavo , správny , centrum a ospravedlniť . Tieto sú však dosť jednoduché ospravedlniť zavádza určitú zložitosť.

Zarovnanie textu by ste mali používať striedmo. Na billboardoch a plagátoch môže byť vhodné centrálne zarovnanie, ale môže spôsobiť, že dlhšie bloky textu budú ťažko čitateľné. Ospravedlnenie je zvyčajne čitateľnejšie, ak sú riadky textu dlhšie. Ospravedlnenie krátkych stĺpcov textu môže spôsobiť škaredé medzery.

The zarovnanie textu property je jednou z mnohých vlastností CSS, ktoré poskytujú užitočné formátovanie a základné určovanie polohy.

zdieľam zdieľam Tweet E -mail 10 jednoduchých príkladov kódu CSS, ktoré sa môžete naučiť za 10 minút

Potrebujete pomoc s CSS? Na začiatok vyskúšajte tieto základné príklady kódu CSS a potom ich použite na vlastných webových stránkach.

Čítajte ďalej
Súvisiace témy
  • Programovanie
  • Vývoj webových aplikácií
  • Vzhľad stránky
  • CSS
O autorovi Bobby Jack(58 publikovaných článkov)

Bobby je technologický nadšenec, ktorý pracoval ako vývojár softvéru väčšinu dvoch desaťročí. Má nadšenie pre hry, pracuje ako editor recenzií v časopise Switch Player a je ponorený do všetkých aspektov online publikovania a webového vývoja.

Viac od Bobbyho Jacka

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber