Propietat CSS text-align: guia completa amb exemples i suport

Inici » Pitó » Propietat CSS text-align: guia completa amb exemples i suport

Quan treballeu amb maquetació web, controlar com es distribueix el text en un bloc és fonamental, i ahí entra en el joc de la propietat text-align. Aquesta regla CSS determina l'alineació horitzontal del contingut en línia dins d'un element contingut, i és clau per organitzar párrafos, titulars, menús o trucades a l'acció amb un estil coherent i llegible.

A més de les opcions clàssiques com a l'esquerra, dret, Centrar y justificar, avui en dia contam amb valors lògics que s'adapten a la direcció del text, com Començar, final o l'interessant coincidència-pare. Aquestes variants faciliten la internacionalització (LTR/RTL) i evitar tenir que reescribir estils quan canvien els idiomes o la direcció d'escriptura.

Què és text-align i per a què serveix

la propietat text-align especifica la alineació horitzontal del contingut en línia que viu dins d'un element de bloc (o elements amb comportament similar). No centra ni desplaça el propi bloc (per a això hi ha altres tècniques), sinó que controla com se li alineen les línies de text i altres elements inline/inline-block al seu interior.

A la pràctica, si s'aplica text-align a <div> oa un <section>, afecta al text ja tot el que sea inline o inline-block dins d'aquest contingut: enllaços, iconos inline, imatges amb display: inline, i elements similars. A la seva vegada, els descendents poden heredar aquest valor i, si ho necessites, pots sobreescriure en nivells inferiors.

Un detall important és que, a la majoria d'idiomes que s'escriuen de l'esquerra a la dreta (LTR), el valor per defecto de text-align es a l'esquerra. Quan el document o el contenidor està a la dreta a l'esquerra (RTL), el comportament per defecto canvia i la alineació natural passa a ser dret. Per això és útil conèixer els valors lògics com Començar y final.

Sintaxis bàsics i valors disponibles

La forma d'ús és molt directa: aplica el valor desitjat al selector del contenedor que engloba el contingut alineal. Aquí tens la sintaxis general i els valors més habituals:

/* Sintaxis general */
selector {
  text-align: left | right | center | justify | start | end | match-parent | initial | inherit;
}

Valors clàssics que trobaràs a qualsevol projecte: a l'esquerra (alineació a l'esquerra), dret (a la dreta), Centrar (centrat) i justificar (màrgens alineats repartint espai entre paraules). Son los más extendidos y ampliamente soportados pels navegants.

A més, CSS incorpora valors lògics i d'herència molt útils: Començar y final s'adapta a LTR/RTL sense que tinguis que canviar estils; coincidència-pare calcula la alineació en funció de la direcció de l'element actual i el seu pare; heretar fuerza la herencia del valor del pare; e inicial restablece el valor al predeterminat de l'estàndard. Aquests valors faciliten la internacionalització i el manteniment.

També hi ha comportament especificat però encara sense suport en els navegadors segons la especificació: per exemple, combinar inici final per alinear la primera línia d'un modo i el resto de l'altre, o alinear per una cadena amb una sintaxi del tipus text-align: "." start; per exemple, números alineats pel separador decimal. Son idees interessants encara no implementades a la pràctica.

Com aplicar sobre diferents tipus d'elements

text-align actua sobre el contingut en línia del contingut (text, inline-blocks, images inline, etc.). Si quieres centrar un element inline, pot bastar amb que el contenedor tingui text-align: center;. En canvi, per centrar el propi contenedor de bloc necessites altres tècniques (per exemple, margin: 0 auto; amb un ancho definit) o ​​utilitzar sistemes de disseny moderns com Flexbox o Grid.

Si el que té és un element restrictivament en línia (Com un <span>) i en vols aplicar un text-align específic, recorda que aquesta propietat no s'aplica “directament” a la línia aïllada; o bé actuas en el seu contenedor de bloc, o són aquests inline en bloc utilitzant alguna cosa com display: block per que pugui alinear el seu contingut amb text-align.

/* Opción 1: Alinear desde el contenedor */
.contenedor {
  text-align: right;
}

/* Opción 2: Convertir el inline en bloque */
span.convertido {
  display: block;
  text-align: right;
}

Recorda a més que text-align no està pensat per alinear verticalment. Per a l'alineació vertical del contingut en línia existeixen valors de vertical-align, i per a blocs o layouts complets, Flexbox o quadrícula són l'opció preferent.

Casos d'usos freqüents i exemples

Un ús molt comú és la alineació d'encaçats i párrafos d'una secció. Per exemple, centrar un titular pot donar més informació visual, mentre que un párrafo justificat aporta un acabat amb màrgenes rectes a tots dos, a l'estil de revistes i periòdics. Elige segons el to del contingut i la llegibilitat.

h1 {
  text-align: center;
}
.articulo p {
  text-align: justify;
}

En una barra de navegació pots optar per un centrat si vols una estètica equilibrada i visible en pantalles grans. Funciona molt bé en webs corporatives o landing pages que busquen simetria.

.nav {
  text-align: center;
}
.nav a {
  display: inline-block;
  padding: .5rem 1rem;
}

En els peus de pàgina es habitual alinear ciertos bloques a la derecha para distinguirlos del flujo principal del texto; per exemple, dades de l'autor, enllaços legals o iconos de redes. Ese contraste ajuda a separar jerarquíes visuals.

footer .meta {
  text-align: right;
}

En crides a l'acció (CTA) centrades, el missatge destaca ràpidament i facilitar el clic al mòbil. Pots combinar un fons llamatiu amb text centrat per crear un bloc que capti l'atenció. El centrado refuerza la jerarquía del CTA.

.cta {
  text-align: center;
  background: #f5f5f5;
  padding: 1.5rem;
}

Valors lògics: inici, final i match-parent

Amb idiomes LTR com l'espanyol o l'anglès, equivalent inicial a l'esquerra y final equivalent a un dret. En textos RTL (árabe, hebreo), comença a la dreta i acaba a l'esquerra. D'aquesta manera, el teu CSS s'adapta automàticament a la direcció del text sense duplicar regles.

/* Se adapta a LTR y RTL */
.card__title {
  text-align: start;
}

.card__meta {
  text-align: end;
}

el valor coincidència-pare és similar a heretar, però calcula el resultat en funció de la direcció de l'element actual i el seu pare. És útil quan hi ha mescles de direccions i necessitas mantenir consistencia sense forçar valors absoluts.

Justificat: consideracions de llegibilitat

Utilitza text-align: justify; crea màrgenes rectos a tots dos repartits espais entre paraules. Queda molt "editorial", però conviene cuidar la mesura de línia i l'interletrado per evitar “ríos” visuals, sobre tot en columnes estretes.

.cuerpo-texto {
  text-align: justify;
  hyphens: auto; /* para mejorar saltos de línea en idiomas compatibles */
}

Existeix un matiz d'implementació: alguns navegadors, com Firefox, poden gestionar l'espai al justificar de forma ligerament diferent a Chrome o Safari. No és un error, sinó diferències de motor. Si el justificat és crític per al teu disseny, prova en diversos navegadors.

text-align-last: controla la última línia

Quan justifiques o alineas blocs complexos, pot interessar-te indicar com se alinea la última línea d'un paràgraf. Aquí entra text-align-last, que admet valors com cotxe, a l'esquerra, dret, Centrar, justificar, Començar y final. Permite refinar el remate del párrafo.

.parrafo {
  text-align: justify;
  text-align-last: center; /* la última línea se centra */
}

el valor cotxe sol justificar i alinear a l'esquerra en contextos LTR, mentre que Començar y final respetan la direcció del text. És una forma fina de controlar el ritme del párrafo sin romper l'estètica general.

Direcció del text i combinació amb unicode-bidi

la propietat direction defineix la direcció d'escriptura dins d'un element: LTR o RTL. En combinació amb unicode-bidi pots forçar o aniquilar direccions en textos amb múltiples idiomes. És especialment útil en interfícies multilingües o quan inseris termes àrabs dins d'un párrafo en espanyol.

.bloque-rtl {
  direction: rtl;           /* establece escritura derecha a izquierda */
  unicode-bidi: embed;      /* ajusta el comportamiento de anidado */
  text-align: start;        /* se alineará a la derecha en RTL */
}

combinar direcció amb valors lògics de text-align estalvia condicionals i fulles alternatives. La maquetación es torna més robusta davant dels canvis d'idioma.

Alineació vertical: vertical-align i alternatives

No hi ha que confundir conceptes: text-align solo alinea en horitzontalPer a verticals, CSS ofereix vertical-align en el context de contingut inline i celdes de tabla. No serveix per centrar blocs complets, però sí per ajustar la línia base o col·locació vertical relativa.

Valors de vertical-align que pots fer servir: línia de base (per defecte), sub, súper, superior, text superior, 1/2, fons, text inferior, a més de longituds i percentatges per desplaçar respecte a la línia base. Son muy útiles para iconos en línea, superíndices o tablas.

• línia de base: alinea amb la línia base del pare.
• sub / súper: simulan subíndices y superíndices.
• superior / fons: se alinean amb l'element més alt/bajo de la línea.
• text superior / text inferior: se alinean amb la part alta/baja de la font del pare.
• 1/2: centra aproximadament respecte a la x-height; útil amb iconos.
• longituds/%: ajusta desplaçaments finos.

Per centrar verticalment blocs complets, és més eficaç d'usar Flexbox o Graella CSS. Son sistemes dissenyats per a layouts i resuelven aquests casos de forma fiable en qualsevol finestra de visualització.

.centro-vertical {
  display: flex;
  align-items: center;   /* centrado vertical */
  justify-content: center; /* opcional: centrado horizontal */
}

Herència, abast i com sobrescribir

Els elements dels fills s'esvaeixen heredar alineació de text del contenidor. Si n'hi ha un <div> poses text-align: center;, tots els seus párrafos e inline tienden a centrar-se també. Per trencar aquesta herència, estableix un valor distint en l'element fill.

.padre {
  text-align: center;
}
.padre .hijo {
  text-align: left; /* sobrescribe la herencia */
}

Amb combinadors i selectores de major especificitat podeu ajustar alineacions en nodos concrets: per exemple, alineat a la dreta només els últims elements d'una llista dins d'un bloc centrat. El control fins a aconseguir combinar els seleccionadors correctament.

.lista {
  text-align: center;
}
.lista li:last-child {
  text-align: right;
}

Disseny responsiu i consultes de mitjans

És habitual canviar la alineació segons l'ancho de pantalla: centrat en mòbil per facilitar la lectura i el toque, alineat a l'esquerra a l'escriptori per a un estil més tradicional. Amb les consultes de mitjans automatitzades sense duplicar HTML.

.cabecera {
  text-align: center;
}
@media (min-width: 768px) {
  .cabecera {
    text-align: left;
  }
}

També pots centrar títols i botons en vistes petites i colocar-los a començar/finalitzar en layouts RTL/LTR sense tocar el CSS quan canviï l'idioma. Usa valors lògics sempre que sea possible per reduir manteniment.

Taula de propietats relacionades

Aquestes propietats suelen ir de la mà quan treballa amb alineació i direcció del text. Repasarles juntes ajuda a construir sistemes tipogràfics robusts:

Propietat	Descripció
direcció	Definiu la direcció d'escriptura (LTR/RTL).
text-align	Controla l'alineació horitzontal del contingut en línia.
text-alineat-últim	Alinea específicament la última línea d'un párrafo.
unicode-bidi	Gestiona com se anidan i resuelven les direccions de text mesclades.
vertical-align	Ajusta la alineació vertical en línies i celdes.

Combinar-les bé et permet resoldre des de interfícies multilingües completes hasta detalles tipográficos muy precisos en cards, tablas o componentes reutilizables. Planifica valors per defecte i excepcions amb cap.

Compatibilitat dels navegadors

la propietat text-align compte amb suport molt ampli des de versions inicials en els navegadors moderns, per lo que podeu utilitzar amb tranquil·litat en projectes de producció. Els valors clàssics funcionen sense problemes pràcticament a totes les parts.

• Google Chrome: 1.0
• Internet Explorer: 3.0
• Microsoft Edge: 12.0
• Firefox: 1.0
• Òpera: 3.5
• Safari: 1.0

Tingues en compte que els màtics de justificació poden variar entre motors (per exemple, Firefox davant de Chrome/Safari). Si l'apariència precisa del justificat és crítica, valida el resultat visual en els navegadors objectiu.

Exemples ràpids de valors tradicionals

Izquierda (per defecto en LTR): alineació natural per a la majoria d'idiomes occidentals. Útil per a lectura còmoda i patrons de escaneo previsibles.

p.izquierda {
  text-align: left;
}

dreta: útil per a metadatos, firmes, data i blocs secundaris. Crea contrast amb el contingut principal.

p.derecha {
  text-align: right;
}

centrat: ideal per a títols, CTA o blocs breus on es busca el focus visual immediat. Evítalo en párrafos llargs per legibilitat.

.cta-titulo {
  text-align: center;
}

Justificat: estètica de columna editorial amb bordes rectos. Combínalo amb partició de paraules quan proceda.

.columna {
  text-align: justify;
}

Bones pràctiques i recomanacions

Sense abusos de la justificació en columnes molt estretes, perquè pot generar espais irregulars. La llegibilitat és prioritària. Ajusta les mesures de línia i, si és possible, habilita guiones automàtics.

Quan maquetes en els voltants multilingües, prioritza Començar y final per adaptar-se sense tocar CSS al canviar l'idioma. T'estalvies fulles duplicades i redueix errors.

Si està en línia, no respon a text-align com esperes, mira el display del seu contenedor. Moltes vegades el problema es resol aplicant la propietat en el bloc pare o canviant el display de l'element.

En components complexos amb diverses capes, documentació on s'estableix l'alineació “base” i on permeten excepcions. Una jerarquía clara evita sobrescritures innecessàries i estils fràgils.

Limitacions, rareses i futur de l'especificació

L'especificació contempla idees com alinear la primera línia distinta del resto amb una notació composta (inici final), o alinear per una cadena (Per exemple, text-align: "." start;) per a columnes numèriques amb separador decimal. Hoy por hoy no compten con soporte práctico en els navegadors, però apuntan a casos d'ús reals en taules i llistats.

Recorda que text-align no resuelve l'alineació vertical ni el centrat del propi blocPer a això, EUA vertical-align (en el seu context), Flexbox o Grid. Separar responsabilitats t'estalvies frustracions i resultats inconsistents.

Respecto a la compatibilitat, els valors tradicionals tenen suport molt sòlid. En la justificat, els motors poden diferir en el reparto d'espais; valida si tu branding exigeix ​​homogeneïtat absoluta. La experiència real de l'usuari manda.

Demostracions ràpides amb HTML i CSS

Ús directe en un titular centrat: un clàssic que funciona per a herois headings i blocs destacats.

<h1 class="titulo">Alineación con text-align</h1>
<style>
  .titulo { text-align: center; }
</style>

Contedor que centra el contingut en línia i un paràgraf justificat: combinació freqüent en articles.

<div class="intro">
  <p>Este es un párrafo de introducción con márgenes pulidos.</p>
</div>
<style>
  .intro { text-align: center; }
  .intro p { text-align: justify; }
</style>

Cercar text-alineat-últim per destacar el tancament del párrafo: control fins sense tocar el contingut.

<p class="cierre">La última línea quedará centrada, resaltando el final.</p>
<style>
  .cierre {
    text-align: justify;
    text-align-last: center;
  }
</style>

Exemple amb valors lògics començar/finalitzar que s'adapten a LTR/RTL: ideal per a productes globals.

<div class="tarjeta">
  <h3 class="tarjeta__titulo">Título de tarjeta</h3>
  <p class="tarjeta__texto">Texto descriptivo del contenido.</p>
</div>
<style>
  .tarjeta__titulo { text-align: start; }
  .tarjeta__texto  { text-align: end; }
</style>

I si necessites alineació vertical en línia (per exemple, icona i text): vertical-align te saca del apuro.

<span class="icono">★</span> <span class="label">Favorito</span>
<style>
  .icono { vertical-align: middle; }
  .label { vertical-align: middle; }
</style>

En escenaris de llista d'articles, podeu alinear els metadades a la dreta i el títol a l'inici amb valors lògics. La jerarquía visual queda clara i s'adapta a la direcció del text.

.post__title { text-align: start; }
.post__meta  { text-align: end; }

Si uses una reixeta de targetes, centrals a nivell de contingut amb text-align i deixa al sistema de layout (Grid/Flex) el reparto espacial. Separa responsabilitats i evita conflictes.

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { text-align: center; padding: 1rem; border: 1px solid #e5e5e5; }

Per últim, si vols que tot el cos herede una alineació per defecte, podeu aplicar-lo al nivell raíz i ajustar excepcions en components concrets. Teniu cura amb l'abast per no centrar el text que deba estar alineat a l'inici per l'accessibilitat.

body { text-align: left; }
.header, .hero { text-align: center; }

La clau amb text-align és entendre que actua sobre el contingut en línia del contingut, elegir el valor adequat per a l'idioma i el dispositiu, i combinar amb propietats afins com text-alineat-últim, direcció y vertical-align quan la situació ho requereixi. Amb aquestes pautes, aconseguiràs resultats consistents, llegibles i fàcils de mantenir.