Proprietà CSS text-align: guida completa con esempi e supporto

Casa » Python » Proprietà CSS text-align: guida completa con esempi e supporto

Quando si lavora con il web maquetación, controllare come distribuire il testo in un blocco è fondamentale e ora entra nel gioco la proprietà text-align. Questa regola CSS determina l'allineamento orizzontale del contenuto in linea all'interno di un elemento contenitore, ed è una chiave per organizzare giochi, titoli, menu o chiamate all'azione con uno stile coerente e leggibile.

Oltre alle opzioni classiche come questa a sinistra, right, centro y giustificare, oggigiorno contamiamo i valori logici che si adattano alla direzione del testo, come inizia a, fine o el interesante corrispondenza-genitore. Queste varianti facilitano l'internazionalizzazione (LTR/RTL) ed evitare di dover riscrivere gli stili quando si cambiano gli idiomi o la direzione di scrittura.

Cos'è l'allineamento del testo e per cosa serve

La proprietà text-align specifica il allineamento orizzontale del contenuto in linea che vive dentro de un elemento di blocco (o elementi con comportamento simile). No centra ni sposta il proprio blocco (per questo ci sono altre tecniche), ma controlla come allineare le righe di testo e altri elementi inline/inline-block al tuo interno.

En la práctica, si aplicas text-align a <div> o a a <section>, influenza il testo e tutto ciò che è in linea o in linea-blocco all'interno di questo contenitore: enlaces, iconos inline, imágenes con display: inline, y elementos similares. A su vez, los descendientes pueden heredar este valor y, si lo necesitas, puedes sobrescribirlo en niveles inferiores.

Un dettaglio importante è che, nella maggior parte degli idiomi che vengono scritti da izquierda a derecha (LTR), il valore per difetto di text-align es a sinistra. Quando il documento o il contenitore sono in posizione defilata (RTL), il comportamento per difetto cambia e l'allineamento naturale passa a ser right. Pertanto è utile conoscere i valori logici come questo inizia a y fine.

Sintassi di base e valori disponibili

La modalità di utilizzo è molto diretta: applicare il valore desiderato al selezionatore del contenitore che ingloba il contenuto in modo lineare. Ecco la sintassi generale e i valori più abituali:

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

Valori classici che troverai in quasi ogni progetto: a sinistra (alineación a la izquierda), right (a destra), centro (centrato) e giustificare (márgenes alineados repartiendo espacio entre palabras). Sono più estesi e ampiamente supportati por los navegadores.

Inoltre, i CSS incorporano valori logici e qui molto utili: inizia a y fine si adatta a LTR/RTL senza dover cambiare stile; corrispondenza-genitore calcola la linea in funzione della direzione dell'elemento attuale e del padre; ereditare fuerza la herencia del valor del padre; e inizialmente ripristinare il valore predeterminato dallo standard. Questi valori facilitano l'internazionalizzazione e la manutenzione.

Vi è anche comportamiento especificado ma aún sin soporte sui navigatori secondo le specifiche: ad esempio, combinar inizio fine per allineare la prima linea di un modo e il resto di altri, o alinear por una cadena con una sintaxis del tipo text-align: "." start; para, por ejemplo, alinear números por el separator decimal. Queste idee interessanti non sono ancora implementate in pratica.

Come si applica a diversi tipi di elementi

text-align agisce sul contenuto in linea del contenitore (testo, blocchi in linea, immagini in linea, ecc.). Se vuoi centrare un elemento in linea, puoi bastare con il contenitore che hai text-align: center;. In cambio, per centrare il proprio contenitore di blocco sono necessarie altre tecniche (ad esempio, margin: 0 auto; con un ancoraggio definito) o utilizzare sistemi di layout moderni come Flexbox o Grid.

Se quello che hai è un elemento strettamente in linea (come un <span>) y quieres aplicar un text-align specifico, ricordo che questa proprietà non si applica “direttamente” al corridoio in linea; o bien actúas nel suo contenitore di bloccoo converti questo inline in blocco usando algo como display: block per poter allineare il contenuto 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;
}

Ricorda anche quello text-align non è pensato per allinearlo verticalmente. Per l'allineamento verticale del contenuto in linea esistono valori de vertical-align, e per blocchi o layout completi, Flexbox o Griglia son la opción preferente.

Casi di utilizzo frequenti ed esempi

Un uso muy común es la alineación de encabezados y párrafos di una sezione. Ad esempio, centrare un titolo può dare una maggiore attenzione visiva, mentre un paragrafo giustificato porta un libro con margini diritti su entrambi i lati, nello stile delle riviste e dei periodici. Scegli secondo il tono del contenuto e la leggibilità.

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

in un barra di navigazione puoi optare per un centro se desideri un'estetica equilibrata e visibile su schermi grandi. Funziona molto bene nei siti Web aziendali o nelle pagine di destinazione que buscan simetría.

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

Durante i piè di pagina è abituale allineare alcuni blocchi alla destra per distinguerli dal flusso principale del testo; ad esempio, i dati dell'autore, i collegamenti legali o le icone delle reti. Questo contrasto aiuta a separare le sequenze visive.

footer .meta {
  text-align: right;
}

En inviti all'azione (CTA) centralizzato, il messaggio viene inviato rapidamente e facilita il clic sul cellulare. Puoi combinare uno sfondo di testo con testo centrale per creare un blocco che catturi l'attenzione. Il centro rimanda alla sequenza del CTA.

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

Valori logici: inizio, fine e corrispondenza-genitore

Con idiomi LTR come lo spagnolo o l'inglese, inizio equivalente a sinistra y fine equivale a destra. Nel testo RTL (arabo, ebraico), inizia a destra e finisce a sinistra. In questo modo, il tuo CSS si adatta automaticamente alla direzione del testo sin duplicar reglas.

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

.card__meta {
  text-align: end;
}

Il valore corrispondenza-genitore è simile a ereditare, ma calcola il risultato in funzione della direzione dell'elemento attuale y su padre. È utile quando ci sono combinazioni di direzioni e è necessario mantenere la consistenza senza forzare valori assoluti.

Giustificazione: considerazioni di leggibilità

Applica text-align: giustificare; crea márgenes rectos a ambos lados ripartiendo espacios entre palabras. Queda muy “editorial”, ma conviene tenere d'occhio il supporto della linea e l'interfaccia per evitare “rischi” visivi, su tutto nelle colonne a strisce.

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

Esiste un metodo di implementazione: alcuni navigatori, come Firefox, puoi gestire lo spazio giustificato da un formato leggermente distinto su Chrome o Safari. Non è un errore, ci sono differenze nel motore. Se la giustificazione è critica per il tuo design, prova su vari navigatori.

text-align-last: controlla l'ultima riga

Quando si giustificano o si allineano blocchi complessi, è possibile indicare interesse come se fosse allineata l'ultima riga de un párrafo. Ahí entra text-align-last, que admite valores como auto, a sinistra, right, centro, giustificare, inizia a y fine. Permite refinar el remate del párrafo.

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

Il valore auto suele giustifica e allinea l'izquierda in contesti LTR, mentre inizia a y fine rispettare la direzione del testo. È un modo per controllare il ritmo del parrafo sin romper la estética general.

Direzione del testo e combinazione con unicode-bidi

La proprietà direction definire il dirección de escritura all'interno di un elemento: LTR o RTL. In combinazione con unicode-bidi puedes forzar o anidar direcciones in testi con molteplici idiomi. È particolarmente utile nelle interfacce multilingue 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 */
}

Combinare direzione con valori logici di allineamento del testo ahorra condizionali e hojas alternative. La maquetación se vuelve más robusta frente a changes de idioma.

Allineamento verticale: allineamento verticale e alternative

Non c'è dubbio che confondiamo i concetti: allineamento del testo solo alinea in orizzontale. Para vertical, CSS ofrece vertical-align nel contesto di contenuto in linea e celle della tabella. Non servirsi per centrare i blocchi completi, ma sì, per regolare la linea base o la posizione verticale relativa.

Valori di vertical-align che puoi usare: linea di base (predefinito), sotto, grande, top, testo in alto, mezzo, fondo, testo in basso, Plus longitudini e percentuali per spostarsi rispetto alla linea base. Sono molto utili per le icone in linea, i sovraindici o le tabelle.

• linea di base: linea con la linea base del padre.
• sotto / grande: simulan sottoindici e superindici.
• top / fondo: se alinean con el elemento más alto/bajo de la línea.
• testo in alto / testo in basso: se alinean con la parte alta/baja de la fuente del padre.
• mezzo: centrato circa rispetto all'altezza x; utile con le icone.
• longitudini/%: ajusta desplazamientos finos.

Para centrar verticalmente blocchi completi, es más eficaz usar Flexbox o Griglia CSS. Sono sistemi progettati per layout e risolvono questi casi in modo affidabile en cualquier viewport.

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

Herencia, alcance y como sobrescribir

Los elementos hijos suelen allineamento del testo di Heredar del contenedor. Si en un <div> pones text-align: center;, tutti i tuoi parametri e in linea tengono anche al centro. Para romper esa herencia, stabilisci un valore distinto nell'elemento hijo.

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

Con combinatori e selettori di maggiore specificità puoi regolare le allineazioni sui nodi concreti: ad esempio, allineare al diritto solo gli ultimi elementi di una lista all'interno di un blocco centrale. El control fino se logra combinando correttamente i selettori.

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

Design responsivo e media query

Es habitual cambiar l'allineamento segue l'ancoraggio dello schermo: centrale sul dispositivo mobile per facilitare la lettura e il tocco, allineato all'izquierda sullo scrittoio per uno stile più tradizionale. Con le media query lo automatizza senza duplicare l'HTML.

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

Puoi anche centrare titoli e pulsanti su piccoli scorci e posizionarli a inizio/fine nei layout RTL/LTR senza toccare il CSS quando si cambia l'idioma. Usa valori logici sempre che sia possibile per ridurre la manutenzione.

Tabella delle proprietà correlate

Estas propiedades suelen ir de la mano quando si lavora con allineamento e direzione del testo. Le riparazioni aiutano a costruire sistemi tipografici robusti:

Propiedad	Descrizione
direzione	Definire la direzione di scrittura (LTR/RTL).
text-align	Controlla l'allineamento orizzontale del contenuto in linea.
allineamento testo-ultimo	Linea specificatamente l'ultima linea di un paragrafo.
unicode-bidi	Gestione come se andasse e restituisse le indicazioni del testo mescolato.
vertical-align	Regolare l'allineamento verticale su linee e celle.

Combinarlas bien te permite il risolutore desde interfacce multilingue complesse ci sono molti dettagli tipografici molto precisi su carte, tabelle o componenti riutilizzabili. Pianificare i valori per difetto ed eccezioni con capo.

Compatibilidad de navegadores

La proprietà allineamento del testo cuenta con supporto molto ampio dalle versioni iniziali nei moderni navigatori, perché puoi usarla con tranquillità nei progetti di produzione. I valori classici operano senza problemi pratici in tutte le parti.

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

Si noti che los matices de justificado è possibile variare tra i motori (ad esempio, Firefox davanti a Chrome/Safari). Se l'apparizione precisa del giustificato è critica, valida il risultato visivo sull'obiettivo dei navigatori.

Esempi rapidi di valori tradizionali

Izquierda (per difetto in LTR): allineamento naturale per la maggior parte degli idiomi occidentali. Útil para lectura cómoda y patrones de escaneo previsibles.

p.izquierda {
  text-align: left;
}

Giusto: útil para metadatos, firmas, fecha y bloques secundarios. Crea contrasto con il contenuto principale.

p.derecha {
  text-align: right;
}

Messo a fuoco: ideale per titoli, CTA o blocchi brevi dove se cerca fuoco visivo immediato. Evítalo en parrafos largos por leggibilidad.

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

Giustificato: estetica della colonna editoriale con bordi retti. Combinalo con partizione di parole quando procedi.

.columna {
  text-align: justify;
}

Buone pratiche e raccomandazioni

No abuses del justificado en columnas muy estrechas, perché è possibile generare spazi irregolari. La legibilidad es prioritaria. Ajusta medidas de línea y, se es possibile, abilita guiones automáticos.

Cuando maquetes en entornos multilingue, dare priorità inizia a y fine per adattare senza toccare CSS al cambiare l'idioma. Te ahorra hojas duplicadas e riduce gli errori.

Si un inline no responde a text-align come aspettavamo, mira il display del tuo contenitore. Molte volte il problema si risolve applicando la propiedad en el bloque padre o cambiare il display dell'elemento.

In componenti complessi con vari capas, documenta quando viene stabilita la linea “base” e dove sono consentite eccezioni. Una frase chiara evita sovrascritture non necessarie y estilos frágiles.

Limitazioni, rarità e futuro della specifica

La specificazione contempla idee come allineare la prima linea distinta del resto con una notazione compuesta (inizio fine), A alinear por una cadena (per esempio, text-align: "." start;) per colonne numeriche con separatore decimale. Hoy por hoy non cuentan con supporto pratico nei navigatori, ma in caso di utilizzo reale nelle tabelle e negli elenchi.

Ricordare l'allineamento del testo non risolve l'allineamento verticale né il centro del proprio blocco. Para eso, usa vertical-align (nel suo contesto), Flexbox o Grid. Separar responsabilidades te ahorra frustraciones y resultados inconsistentes.

Per quanto riguarda la compatibilità, i valori tradizionali sono attuali soporte muy sólido. In giustificato, los motores pueden diferir en el reparto de espacios; valida se il tuo marchio richiede omogeneità assoluta. La esperienza reale del mandante dell'usuario.

Dimostrazioni rapide con HTML e CSS

Uso diretto in un centro titolare: un clásico que funciona para intestazioni degli eroi e blocchi destacados.

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

Contenitore che centra il contenuto in linea e un messaggio giustificato: combinazione frequente negli articoli.

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

Applicare allineamento testo-ultimo para destacar el cierre del párrafo: control fino sin tocar el contenido.

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

Ejemplo con valores lógicos inizio/fine que se adaptan a LTR/RTL: ideal para productos globales.

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

E se ne hai bisogno allineamento verticale in linea (per esempio, icona e testo): 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>

Negli scenari dell'elenco degli articoli è possibile allineare i metadati al diritto e al titolo all'inizio con valori logici. La scena visiva è chiara e si adatta alla direzione del testo.

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

Se utilizzi un file grata de tarjetas, céntralas a nivel de contenido con text-align y deja al sistema de layout (Grid/Flex) el reparto espacial. Separare le responsabilità ed evitare conflitti.

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

Por último, si quieres que tutto il corpo ecco una linea per difetto, puoi applicarla al livello raíz y regolare le eccezioni nei componenti concreti. Fai attenzione con l'abilità di non centrare il testo che devi allineare all'inizio per l'accessibilità.

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

La clave con text-align significa capire che agire sul contenuto in linea del contenitore, scegliere il valore adatto alla lingua e al dispositivo e combinarlo con proprietà simili allineamento testo-ultimo, direzione y vertical-align quando la situazione lo richiede. Con questi passaggi otterrai risultati coerenti, leggibili e facili da mantenere.