Home-theater-designers
Una de les primeres funcions que van conèixer tots els desenvolupadors a l’hora de comprendre el processament de textos va ser l’alineació de text. Aquesta petita eina ha estat vital tant per als compositors professionals com per als dissenyadors de flyers aficionats. No és d’estranyar que CSS tingui suport per a l’alineació de text quan es tracta de disseny web.
El alinear text La propietat, juntament amb una o dues més, controla com un element alinea el seu text horitzontalment. Més enllà dels conceptes bàsics, els navegadors implementen lentament més de les especificacions, però el suport complet varia. Obteniu informació sobre com alinear text i quines funcions són compatibles amb els navegadors habituals actualment.
Conceptes bàsics de la propietat CSS-align
L’alineació és un dels termes de tipografia més familiars. En el context de CSS, alinear text fa referència a l'alineació horitzontal.
L'alineació horitzontal del text només s'aplica als contenidors de blocs. Es tracta d’elements d’amplada completa, com ara paràgrafs i divs. Utilitzant el alinear text propietat en un element en línia com ara dins no tindrà cap efecte. També podeu alinear elements de llista i cel·les de taula:
quant costa netflix al mes
Per defecte, en un idioma d’esquerra a dreta (més d’això més endavant), el text s’alinea a l’esquerra:
A CSS, això és el mateix que:
p { text-align: left; }O bé:
p { text-align: start; }Relacionat: Per a què serveixen els fulls d'estil en cascada i per a què serveix CSS?
Podeu utilitzar altres valors per al fitxer alinear text propietat per canviar l'alineació horitzontal. Els valors més comuns són familiars a les aplicacions de processament de textos:
text-align: left
text-align: center
text-align: rightUtilitzeu la justificació per alinear els cantons esquerre i dret
Un altre valor comú per a alinear text és justificar . Els navegadors afegeixen espai al text justificat de manera que cada línia s’estén per omplir l’espai disponible:
Quan justifiqueu el text, la línia final pot ser complicada. Com que pot ser molt curt (possiblement només una sola paraula), espaiar-lo per tota l'amplada pot ser lleig. Per defecte, fins i tot el text justificat alinearà la línia final a l'esquerra.
quant costa actualitzar de Windows 10 Home a Pro
De vegades és possible que vulgueu un efecte diferent. Les implementacions del navegador s’estan posant al dia amb les especificacions, però són possibles dos enfocaments.
El justificar-ho tot valor hauria de significar que els navegadors tracten la línia final com totes les altres i l'estenen a tota l'amplada. Tot i això, en el moment d’escriure-ho, cap navegador admet aquest valor. Tu pots comproveu si podeu fer-ho quan llegiu aquest article.
Una altra propietat CSS, text-align-last , és més flexible i té un millor suport. Podeu tractar-lo més o menys igual que alinear text , però només s'aplica a la línia final:
El suport del navegador per a aquesta propietat és millor, però no perfecte. De nou, comproveu caniuse abans d'utilitzar-lo . Si un navegador no reconeix aquesta propietat, la ignorarà.
Alineació de text i direcció de lectura
És possible que estigueu treballant amb un idioma, com ara l’àrab o l’hebreu, que es llegeix de dreta a esquerra. CSS utilitza el fitxer direcció propietat per especificar-ho, per exemple:
direction: rtl;Aquests idiomes solen alinear text per defecte a la dreta.
En lloc d’haver d’especificar a l'esquerra / dret , la forma preferida per alinear el text utilitza els valors començar i final . S’especifica si el text s’ha d’alinear al principi de cada línia o al final. En idiomes d’esquerra a dreta, començar equival a a l'esquerra . En un idioma de dreta a esquerra, el text comença a la dreta i acaba a l'esquerra.
Apple Watch alumini vs acer inoxidable
Utilitzant començar o bé final significa que, independentment de la direcció del text, l'alineació és coherent.
Com hereten els elements la propietat de text-align
Heu de ser conscients que el fitxer alinear text la propietat hereta. Per exemple, si el configureu a cos element, s'aplicarà a tots els elements de la pàgina. Per descomptat, podeu anul·lar-lo en qualsevol element.
Utilitzant la propietat text-align per controlar el disseny
Podeu utilitzar el fitxer alinear text Propietat CSS per definir com els navegadors distribueixen text horitzontalment. Els valors més habituals són a l'esquerra , dret , centre , i justificar . Tot i això, són bastant senzills justificar introdueix certa complexitat.
Haureu d’utilitzar l’alineació de text amb moderació. A les cartelleres i pòsters, l'alineació central pot ser adequada, però pot dificultar la lectura de blocs de text més llargs. La justificació sol ser més llegible quan les línies de text són més llargues. Justificar columnes curtes de text pot crear un espaiat desagradable.
El alinear text La propietat és una de les moltes propietats CSS que proporcionen un format útil i un posicionament bàsic.
Compartir Compartir Tweet Correu electrònic 10 exemples senzills de codi CSS que podeu aprendre en 10 minutsNecessiteu ajuda amb CSS? Proveu aquests exemples bàsics de codi CSS per començar, i apliqueu-los a les vostres pròpies pàgines web.
Llegiu a continuació Temes relacionats- Programació
- Desenvolupament web
- Web Design
- CSS
Bobby és un entusiasta de la tecnologia que va treballar com a desenvolupador de programari durant gairebé dues dècades. És un apassionat dels jocs, treballa com a editor de ressenyes a Switch Player Magazine i està immers en tots els aspectes de la publicació en línia i el desenvolupament web.
Més de Bobby JackSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us