Proprietatea text-align CSS: ghid complet cu exemple și suport

Acasă » Piton » Proprietatea text-align CSS: ghid complet cu exemple și suport

Când lucrează cu maquetación web, controlează cum se distribuie textul într-un bloc este fundamental, și ahí intra în jocul proprietății text-align. Această regulă CSS determină alinierea orizontală a conținutului în linie într-un element conținut, y es clave para organizar párrafos, titulares, menus or calls a the action with a style coherente and readible.

În plus de la opțiunile clasice ca stânga, dreapta, centru y justifica, hoy în ziua contam cu valori logice care se adaptează la direcția textului, cum ar fi Începe, capăt sau cel interesant părinte-corespondent. Aceste variante facilitează internaționalizarea (LTR/RTL) y evitan tener que reescribir stilurile când schimbă limbajul sau direcția de scriere.

Qué es text-align y para qué sirve

Proprietatea text-align specifică la alinearea orizontală a conținutului pe linie que vive dentro de un element de bloc (o elemente cu comportament similar). No centra ni desplaza el propio bloc (para eso hay otras técnicas), sino que controla cum se aline las línea de texto și alte elemente inline/inline-block în interior.

În practică, dacă se aplică text-align la <div> sau la un <section>, afecta al textului ya tot ce sea inline sau inline-block dentro de ese contenedor: enlaces, iconos inline, imagini con display: inline, și elemente similare. A su vez, los descendientes can heredar este valor y, si lo necesitas, you may overscribelo in levels inferiors.

Un detalle importante es que, în la mayoría de idiomas care se escriben de izquierda a derecha (LTR), el valor por defecto de text-align es stânga. Când el document sau el contenedor este în dreapta a left (RTL), el comportament por defecto cambia și la alineación naturală pasa a ser dreapta. Pentru că este util să cunoașteți valorile logice Începe y capăt.

Sintaxis básica și valori disponibile

La forma de utilizare este foarte directă: aplica el valor dorit al selector del contenedor que engloba el contenido a alinear. Aici are sintaxis general și valorile mai obișnuite:

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

Valori clasice care se află în orice proiect: stânga (aliniere la stânga), dreapta (în dreapta), centru (central) și justifica (márgenes alineados repartiendo spațiu între cuvinte). Son los más extendidos y ampliamente soportados de către navigatori.

În plus, CSS încorporează valori logice și de herencia foarte utile: Începe y capăt se adaptează la LTR/RTL fără a avea nevoie de schimbarea stilurilor; părinte-corespondent calculat la alineación en función de la direcția elementului actual și a lui padre; moşteni fuerza la herencia del valor del padre; e inițială Restablece el valor al predeterminado del standard. Aceste valori facilitează internaționalizarea și întreținerea.

Există, de asemenea, comportamentul specificat, dar încă fără suport en los navegadores según la especificación: de exemplu, combinar început sfârșit para alinear la prima línea de un modo și el resto de otro, o aliniat printr-o lanț cu o sintaxă a tipului text-align: "." start; pentru, de exemplu, numere alineare pentru separatorul decimal. Sunt idei interesante, chiar dacă nu sunt implementate in practica.

Cum se aplică asupra diferitelor tipuri de elemente

text-align acționează asupra conținutului inline del contenedor (text, inline-blocks, imágenes inline, etc.). Si quieres centrar un element inline, puede bastar con que el contenedor tenga text-align: center;. În schimb, pentru a centra propriul conținut de bloc necesită alte tehnici (de exemplu, margin: 0 auto; cu un ancora definit) sau utilizați sisteme de layout moderno ca Flexbox sau Grid.

Si lo que tienes es un element restricționat în linie (ca <span>) și vrei să aplici unul text-align specific, recuerda que esta proprietate nu se aplică „directamente” al inline izolat; o bien actúas en su contenedor de blocsau converts ese inline en bloque folosind ceva asemănător display: block pentru că poate alinearse su conținut con 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;
}

De asemenea, amintiți-vă că text-align nu este gândit pentru alinear verticalmente. Pentru alinearea verticală a conținutului în linie există valori de vertical-align, y para blocs o layouts completes, flexbox o Grilă este opțiunea preferată.

Cazuri de uzuri frecvente și exemple

O utilizare foarte comună este alineación de encabezados y párrafos de o secţiune. De exemplu, centrar un titular poate dar mai mult vizual, în timp ce un párrafo justificado aduce un acabado cu márgenes rectos a ambele lados, al estilo de revistas și periódicos. Elige según el tono del conținut și la legibilitate.

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

Într-o bara de navigare poți opta pentru un centru și vrei o estetică echilibrată și vizibilă în ecrane mari. Funciona foarte bine în webs corporativas sau landing pages care caută simetrie.

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

În subsolurile es habitual alinear ciertos bloques a la derecha para distinguirlos del flujo principal del texto; de exemplu, date del autor, links legales sau icons de redes. Este contraste ajuta a separa jerarquías visuales.

footer .meta {
  text-align: right;
}

En chemări la acțiune (CTA) centrate, mesajul remarca rapid și facilitează clicul pe mobil. Puteți combina un fundal lamativ cu text centrat pentru a crea un bloc care capte la atenție. El centrado refuerza la jerarquía del CTA.

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

Valori logice: început, sfârșit și potrivire-părinte

Cu limbi LTR ca el español sau englez, început echivalent cu stânga y sfârșit echivalent cu un drept. En textos RTL (árabe, hebreo), început dreapta sfârșit stânga. În acest fel, tu CSS se adaptează automat la adresa de text fără duplicarea regulilor.

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

.card__meta {
  text-align: end;
}

Valoarea părinte-corespondent este similar a moşteni, pero calculează rezultatul în funcție de la direcția elementului actual și tatăl său. Este util când există amestecuri de direcții y necesitas mentine consistencia sin forzar valori absolutos.

Justificado: consideraciones de legibilidad

Folosi text-align: justificare; crea márgenes rectos a ambele lados repartiendo spații între cuvinte. Rămâne foarte „editorial”, pero conviene cuidar la măsură de linie și el interletrado pentru a evita „ríos” vizuale, peste tot în coloane estrechas.

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

Există o matiz de implementare: unele navigatoare, ca Firefox, pot gestiona el espaciat al justificarii formei clar diferită a Chrome sau Safari. Nu este o eroare, nu există diferențe de motor. Si el justificado este critic pentru dvs. design, proba în mai multe navigatoare.

text-align-last: controla la ultima línea

Când justifică o alinea blocuri complexe, poate interesarte indica cómo se alinea la última línea dintr-un paragraf. Aici intră text-align-last, care recunoaște valori precum Auto, stânga, dreapta, centru, justifica, Începe y capăt. Permite refinar el remate del párrafo.

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

Valoarea Auto suele justificar y alinear a la izquierda en contextos LTR, while que Începe y capăt respetan la direcția textului. Este o formă fina de control al ritmului párrafo sin romper la estética general.

Direcția textului și combinația cu unicode-bidi

Proprietatea direction defineste direcția de scriere dentro de un element: LTR sau RTL. În combinație cu unicode-bidi s-ar putea forțarea sau îndrumarea direcțiilor en textos cu multiple idiomas. Este deosebit de util în interfețe multilingve o cuando insertas términos árabes dentro de un párrafo en español.

.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 */
}

combină direcţie cu valorile logice ale text-align economisiți condiționale și hojas alternative. La maquetación se vuelve mai robusta față de schimbări de idioma.

Alineación vertical: vertical-align y alternative

No hay que confundir concepte: text-align solo alinea en horizontalPentru verticale, CSS oferă vertical-align in contextul contenido inline y celdas de tabla. No sirve para centrar blocs completos, pero sí pentru a ajusta linia de bază sau colocația verticală relativă.

Valori ale vertical-align pe care il puteti folosi: de bază (implicit), sub, super, top, text-sus, de mijloc, de jos, text-jos, în plus față de longitudini și procente pentru a deplasa cu privire la linia de bază. Son muy útiles para icons inline, superíndices sau tablas.

• de bază: alinea con la línea base del padre.
• sub / super: simulan subíndices y superíndices.
• top / de jos: se alinean cu el elemento más alto/bajo de la línea.
• text-sus / text-jos: se alinean cu la parte alta/baja de la fuente del padre.
• de mijloc: centra aproximativ cu privire la x-height; útil con iconos.
• longitudini/%: ajusta desplazamientos finos.

Pentru centrare verticală blocuri complete, este mai eficient de utilizat flexbox o Grila CSS. Son sisteme proiectate pentru layouts și resuelven aceste cazuri de forma fiable în orice fereastră de vizualizare.

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

Herencia, alcance și cum sobrescribir

Elementele fiilor lor sunt moi aliniere text heredar din recipient. Dacă este unul <div> tu pui text-align: center;, todos sus párrafos e inline tienden a centrarse también. Pentru a salopeta, această erecție, stabilește un valor distinto în el elemento hijo.

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

cu combinadores y selectores de mayor especificidad puteți ajusta alineații în nodos concretos: de exemplu, aliniat la dreapta solo los ultimii elemente dintr-o listă într-un bloc centrat. El control fino se obține combinando selectores corect.

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

Design responsivo și media interogări

Este obișnuit să schimbi la alineación según el ancho de pantalla: centrat în mobil pentru a facilita lectura și toque, aliniat la stânga pe desktop pentru un stil mai tradițional. Cu media interogări se automatizează fără a duplica HTML.

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

También puedes centrar titluri și botones în vederi mici și colocarlos a începe/termină en layouts RTL/LTR nu poti folosi CSS când schimbi limba. Usa valori lógicos siempre que sea posible pentru a reduce întreținerea.

Tabla de proprietăți legate

Aceste proprietăți sunt ale mâinii când lucrează cu alinierea și direcția textului. Repasarlas junte ajută la construirea de sisteme tipográficos robustos:

proprietate	descriere
direcţie	Definiți direcția de scriere (LTR/RTL).
text-align	Controla alinearea orizontală a conținutului în linie.
text-aliniere-ultima	Alinea în mod specific la ultima línea de un párrafo.
unicode-bidi	Gestiona cómo se anidan și resuelven direcciones de texto mezcladas.
vertical-aliniat	Ajusta alinearea verticală în linii și celdas.

Combinarlas bine te permite rezolvarea desde interfețe multilingve complexe hasta detalles tipográficos muy precisos en cards, tablas sau componentes reutilizables. Planifica valorile defectului și excepțiilor cu capul.

Compatibilitatea navigatoarelor

Proprietatea text-align cuenta cu suport muy amplio desde versiuni inițiale în navigatorii moderni, pentru a putea folosi cu liniște în proiecte de producție. Valorile clasice operează fără probleme practic în toate părțile.

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

Rețineți că maticile justificate pot varia între motoare (de exemplu, Firefox față de Chrome/Safari). Si la apariencia precisa del justificado es crítica, valida rezultatul vizual în navegadorele obiective.

Exemple rapide de valori tradiționale

Izquierda (por defecto en LTR): alineación naturală pentru majoritatea limbajelor occidentale. Útil para lectura cómoda y patrones de escaneo previsibles.

p.izquierda {
  text-align: left;
}

Dreapta: útil para metadatos, firmas, fecha y bloques secundarios. Crea contraste cu el conținut principal.

p.derecha {
  text-align: right;
}

Centrat: ideal pentru titluri, CTA sau blocs breves donde se caută foco visual inmediato. Evítalo en párrafos largos por legibilidad.

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

justificat: estética de columna editorial con bordes rectos. Combínalo cu partición de cuvinte când proceda.

.columna {
  text-align: justify;
}

Bune practici și recomandări

Fără abuzuri justificate în coloane foarte înguste, deoarece poate genera spații neregulate. Lizibilitatea este prioritară. Ajusta măsuri de linie și, dacă este posibil, habilita guiones automáticos.

Când machete în împrejurimi multilingv, prioritizează Începe y capăt pentru adaptare sin tocar CSS la schimbarea idioma. Te economisești frunzele duplicate și reduce erorile.

Dacă este în linie, nu răspunde la text-align cum aștepți, mira el display de su contenedor. Muchas veces el problema se resuelve aplicando la proprietate în el bloque padre o cambiando el display del element.

În componente complexe cu mai multe capse, documente unde se stabilește alinearea „bază” și unde se permite excepții. Una jerarquía clara evita sobrescrituras innecesarias și stiluri fragile.

Limitări, rareze și viitor ale specificației

La specificación contempla ideile ca alinear la prima linie distincto del resto cu o notație compusă (început sfârșit), sau aliniat printr-o lanț (de exemplu, text-align: "." start;) pentru coloane numerice cu separator decimal. Hoy por hoy no cuentan cu suport practic în los navegadores, dar susțin cazuri de uz reale în tablas și listados.

amintiți-vă că text-align no resuelve la alineación vertical ni el centrado del propio blocPentru asta, SUA vertical-aliniat (en su context), Flexbox o Grid. Separarea responsabilităților te economisești frustrări și rezultate inconsistente.

Respecto a compatibilidad, los valores tradicionales tienen suport foarte solid. În justificate, los motoare pot diferir în el reparto de espacios; valida si tu branding exige homogeneidad absoluta. La experiența reală a utilizatorului mandat.

Demonstrări rapide cu HTML și CSS

Utilizare directă într-un titular centrat: un clasic care funcționează pentru hero headings și blocs destacados.

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

Conține care centra conținutul în linie și un párrafo justificat: combinație frecventă în articole.

<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>

aplicar text-aliniere-ultima pentru a remarca închiderea párrafului: control până la atingerea conținutului.

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

Exemplu cu valori logice începe/termină care se adaptează la LTR/RTL: ideal pentru produse globale.

<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 dacă aveți nevoie alineación verticală în linie (de exemplu, pictogramă ș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>

În scenariile listei de articole, puteți alinia metadatele la dreapta și titlul la pornire cu valori logice. La jerarquía vizuală rămâne clară și se adaptează la direcția textului.

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

Dacă utilizați un grătar de tarjetas, centrale la nivel de conținut con text-align y deja al sistema de layout (Grid/Flex) el reparto espacial. Separați responsabilitatea și evitarea conflictelor.

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

În cele din urmă, dacă vrei ca tot corpul herede una alineación por defecto, poți aplica la nivel raíz y ajustați excepțiile în componente concrete. Ten cuidado cu el alcance pentru a nu centra textul care trebuie să fie aliniat la începutul accesibilității.

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

Cheia cu text-align se înțelege că acționează asupra conținutului în linie al conținutului, alegeți valoarea potrivită pentru limba și dispozitivul și combinați proprietățile precum text-aliniere-ultima, direcţie y vertical-aliniat când la situația este necesară. Con estas pautas, lograás rezultate consistente, lizibile și ușor de păstrat.