Propiedad CSS text-align: guía completa con ejemplos y soporte

Domov » Python » Propiedad CSS text-align: guía completa con ejemplos y soporte

Cuando trabajas con maquetación web, controlar cómo se distribuye el texto en un bloque es fundamental, y ahí entra en juego la propiedad text-align . Esta regla CSS determina la alineación horizontal del contenido en línea dentro de un elemento contenedor , y es clave para organizar párrafos, titulares, menus o llamadas a la ación con un estilo coherente y lesible.

Además de las opciones clásicas como left , right , center y justify , hoy en día contamos con valures lógicos que se adaptan a la dirección del texto, como start , end o el interesante match-parent . Estas variantes facilitan la internacionalización (LTR/RTL) y evitan tener que reescribir estilos cuando cambian los idiomas o la dirección de escritura.

Qué es text-align y para qué surve

Premoženje text-align specifična alineación horizontal del contenido en línea que vive dentro de un elemento de bloque (o elementos con comportamiento similar). No centra ni desplaza el propio bloque (para eso hay otras técnicas), sino que controla cómo se alinean las líneas de texto y drugi elementi inline/inline-block en su interior.

V praksi, če se uporablja text-align ima a <div> ali še <section>, afecta al texto ya todo lo que sea inline ali inline-block dentro de ese contenedor: enlaces, iconos inline, imágenes con display: inline, podobnih elementov. A su vez, los descendientes pueden heredar este valor y, si lo necesitas, puedes sobrescribirlo en niveles inferiores.

Un detalle importante es que, en la mayoría de idiomas que se escriben de izquierda a derecha (LTR), el valor por defecto de text-align es levo. Cuando el documento o el contenedor está en derecha a izquierda (RTL), el comportamiento por defecto cambia y la alineación natural pasa a ser Pravica. Por eso es útil conocer los valores lógicos como Začetek y konec.

Sintaxis básica y valores disponibles

La forma de uso es muy directa: aplica el valor deseado al selector del contenedor que engloba el contenido a alinear. Aquí tienes la sintaxis general y los valores más habituales:

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

Valores clásicos que encontrarás en casi cualquier proyecto: levo (alineación a la izquierda), desno (a la derecha), center (centrado) in poravnano (márgenes alineados repartiendo espacio entre palabras). Son los más extendidos y ampliamente soportados por los navegadores.

To pomeni, da CSS vključuje logike vrednosti in de herencia muy útiles: začetek in konec se prilagodita LTR/RTL s tem, da so izbrani stili; match-parent calcula la alineación en función de la dirección del elemento actual y su padre; podedovati fuerza la herencia del valor del padre; e initial restablece el valor al predeterminado del estándar. Estos valores facilitan la internacionalización y el mantenimiento.

Obstaja tudi comportamiento especificado pero aún sin soporte en los navegadores según la especificación: por ejemplo, combinar začetek konec para alinear la primera línea de un modo y el resto de otro, o alinearno po vrstici s sintakso vrste text-align: "." start; para, por ejemplo, alinearne numeros por el separador decimal. Sin ideje interesantes aún no implementadas v praksi.

Cómo se aplica sobre distintos tipos de elementos

tekst-align actúa sobre el contenido inline del contenedor (texto, inline-blocks, mágenes inline itd.). Si quieres centralar un elemento inline, puede bastar con que el contenedor tenga text-align: center;. En cambio, para centralar el propio contenedor de bloque necesitas otras técnicas (por ejemplo, margin: 0 auto; con un ancho definido) o uporabi sodobnih sistemov postavitve kot Flexbox ali Grid.

Si lo que tienes es un elemento vrstične omejitve (kot <span>) in želite uporabiti text-align específico, recuerda que esta propiedad no se aplica “directamente” al inline aislado; o bien actúas en su contenedor de bloqueali conviertes ese inline en bloque uporabi nekaj takega kot display: block para que pueda alinearse su contenido 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;
}

Zapomni si tudi to text-align ni napisan za poravnano navpično. Para la alineación vertical del contenido inline existen valores de vertical-align, y para bloques ali layouts completos, Flexbox o Mreža to je najljubša možnost.

Casos de uso frecuentes y ejemplos

Un uso muy común es la alineación de encabezados y párrafos de una sección. Por ejemplo, centralar un titular puede dar más énfasis visual, mientras que un párrafo justificado aporta un acabado con márgenes rectos a ambos lados, al estilo de revistas y periódicos. Elige según el tono del contenido y la legibilidad.

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

En una barra de navegación puedes optar por un centrado si quieres una estética equilibrada y visible en pantallas grandes. Funciona muy bien en webs corporativas o ciljnih straneh que buscan simetría.

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

En los pies de página es habitual alinear ciertos bloques a la derecha para distinguirlos del flujo principal del texto; por ejemplo, datos del avtor, enlaces legales o iconos de redes. Ese kontraste ayuda a separar jerarquías visuales.

footer .meta {
  text-align: right;
}

En llamadas a la acción (CTA) centradas, el mensaje destaca rápidamente y facilita el clic en mobile. Puedes combinar un fondo llamativo con texto centralo para crear un bloque que capte la atención. El centrado refuerza la jerarquía del CTA.

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

Logične vrednosti: začetek, konec in nadrejeni element

Con idiomas LTR como el español o el inglés, start equivale a left y end equivale a right . En textos RTL (árabe, hebreo), začetek je desno in konec levo . De este modo se tu CSS samodejno prilagaja usmeritvi besedila s podvojenim reglasom.

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

.card__meta {
  text-align: end;
}

El valor match-parent je podoben inherit , pero calcula el resultado en función de la dirección del elemento actual y su padre. Es útil cuando hay mezclas de direcciones y necesitas mantener consistencia sin forzar valores absolutos.

Justificado: consideraciones de legibilidad

Uporabite poravnavo besedila: poravnajte; crea márgenes rectos a ambos lados repartiendo espacios entre palabras. Queda muy “editorial” , pero conviene cuidar la medida de línea y el interletrado para evitar “ríos” visuales, sobre todo en columnas estrechas.

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

Existe un matiz de implementación: algunos navegadores, como Firefox , pueden gestionar el espaciado al justificar de forma ligamente distinta a Chrome ali Safari. No es un error, sino diferencias de motor . Si el justificado es crítico para tu diseño, prueba en varios navegadores.

text-align-last: nadzor nad zadnjo linijo

Cuando justificas o alineas bloques complejos, puede interesarte indicar cómo se alinea la última línea iz para. Ah, vstopi. text-align-last, ki priznavajo vrednosti kot avto, levo, Pravica, center, upravičujejo, Začetek y konec. Permite refinar el remate del párrafo.

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

El valor auto suele justificar y alinear a la izquierda en contextos LTR, mientras que start y end respetan la dirección del texto. Es una forma fina de controlar el ritmo del párrafo sin romper la estética general.

Dirección del texto y combinación con unicode-bidi

Premoženje direction opredeljuje smer pisanja dentro de un elemento: LTR ali RTL. En combinación con unicode-bidi lahko odpreti ali izklopiti smeri en textos conúltiples idiomas. Es specialmente útil en vmesniki večjezični 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 */
}

Combinar direction con valures lógicos de text-align ahorra condicionales y hojas alternativas. La maquetación se vuelve más robusta frente a cambios de idioma.

Navpična poravnava: navpična poravnava in druge možnosti

No hay que confundir conceptos: poravnava besedila solo alinea in vodoravnoZa vertikalno, CSS pisarno vertical-align v kontekstu contenido inline y celdas de tabla. No sirve para central bloques completos, pero sí para ajustar la línea base o colocación vertical relativa.

Vrednosti vertical-align ki ga lahko uporabite: izhodiščno (privzeto), spodaj, super, vrh, besedilo na vrhu, srednji, dno, besedilo na dnupoleg zemljepisne dolžine in odstotki para desplazar respecto a la línea base. Son muy útiles za ikone v vrstici, nadindeksi ali tabele.

• izhodiščno: alinea con la línea base del padre.
• spodaj / super: simulirani podindeksi in superindeksi.
• vrh / dno: se alinean con el elemento más alto/bajo de la línea.
• besedilo na vrhu / besedilo na dnu: se alinean con la parte alta/baja de la fuente del padre.
• srednji: center aproximadamente respecto a la x-height; útil con iconos.
• zemljepisne dolžine/%: ajusta desplazamientos finos.

Za osrednje navpične popolne bloke je es más učinkovita uporaba Flexbox ali CSS Grid . Son sistemas diseñados para layouts y resuelven estos casos de forma fiable en cualquier viewport.

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

Herencia, alcance y cómo sobrescribir

Suhi hčerinski elementi poravnava besedila heredar del contenedor. Si en un <div> poni text-align: center;, todos sus párrafos e inline tienden a centralarse también. Za to herencijo, establece un valor distinto en el elemento hijo.

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

Con combinadores y selectores de mayor especificidad puedes ajustar alineaciones en nodos concretos: por ejemplo, alinear a la derecha solo los últimos elementos de una lista dentro de un bloque centralo. El control fino se logra combinando selectores correctamente.

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

Diseño responsivo y medijske poizvedbe

Es habitual cambiar la alineación según el ancho de pantalla : centrado en móvil para facilitar lectura y toque, alineado a la izquierda en escritorio para un estilo más tradicional. Z medijskimi poizvedbami, ki so avtomatizirane s podvajanjem HTML.

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

También puedes centralar títulos y botones en vistas pequeñas y colocarlos a start/end en layouts RTL/LTR sin tocar el CSS cuando cambie el idioma. Usa valores lógicos siempre que sea posible para reducir mantenimiento.

Tabla de propiedades relacionadas

Estas propiedades suelen ir de la mano cuando trabajas con alineación y dirección del texto. Repasarlas juntas ayuda a construir sistemas tipográficos robustos :

Lastnina	opis
smer	Opredelitev la dirección de escritura (LTR/RTL).
text-align	Controla la alineación horizontal del contenido inline.
poravnava-besedila-nazadnje	Alinea específicamente la última línea de un párrafo.
unicode-bidi	Gestiona cómo se anidan y resuelven direcciones de texto mezcladas.
navpično poravnati	Ajusta la alineación vertical en lineas y celdas.

Combinarlas bien te permite resolver desde vmesniki multilingües complejas hasta detalles tipográficos muy precisos en cards, tablice ali komponente, ki jih je mogoče ponovno uporabiti. Planifica valores por defecto y excepciones con cabeza.

Združljivost navigatorjev

La propiedad text-align cuenta con soporte muy amplio desde versiones iniciales en los navegadores modernos, por lo que puedes usarla con tranquilidad en proyectos de producción. Los valores clásicos operan sin problemas prácticamente en todas partes.

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

Ten en cuenta que los matices de justificado pueden variar entre motores (por ejemplo, Firefox frente a Chrome/Safari). Si la apariencia precisa del justificado es crítica , valida el resultado visual en los navegadores objetivo.

Ejemplos rápidos de valores tradicionales

Izquierda (por defecto en LTR): alineación natural para la mayoría de idiomas occidentales . Útil para lectura cómoda y patrones de escaneo previsibles.

p.izquierda {
  text-align: left;
}

Derecha: útil para metadatos, firmas, fecha y bloques secundarios . Crea contracte con el contenido principal.

p.derecha {
  text-align: right;
}

Centero: idealno za naslove, CTA ali bloki breves donde se busca foco vizualno inmediato. Evítalo en párrafos largos por legibilidad.

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

Justificado: estética de columna editorial con bordes rectos . Combínalo con partición de palabras cuando proceda.

.columna {
  text-align: justify;
}

Dobre prakse in priporočila

Brez zlorab del justificado en columnas muy estrechas , porque puede generar espacios irregulares. La legibilidad es prioritaria . Ajusta medidas de línea y, si es posible, habilita guiones automáticos.

Cuando maquetes en entornos multilingües , dajte prednost start y end para adaptarte sin tocar CSS al cambiar el idioma. Te ahorra hojas duplicadas y reduce errores.

Če v vrstici ni odgovora text-align kako upam, mira el display de su contenedor. Muchas veces el problema se resuelve aplicando la propiedad en el bloque padre o cambiando el display del elemento.

En componentes complejos con varias capas, documenta dónde se establece la alineación “base” y dónde se permiten excepciones. Una jerarquía clara evita sobrescrituras innecesarias y estilos frágiles.

Limitaciones, rarezas y futuro de la especificación

La especificación contempla ideas como alinear la primera línea distinto del resto z računalniško zapisanim zapiskom (začetek konec), Or alinearno po vrstici (npr. text-align: "." start;) para columnas numéricas con parador decimal. Hoy por hoy no cuentan con soporte práctico en los navegadores, pero apuntan a casos de uso reales en tablas y listados.

Recuerda que text-align no resuelve la alineación vertical ni el centralo del propio bloque . Za to uporabite navpično poravnavo (v kontekstu), Flexbox ali Grid. Separar responsabilidades te ahorra frustraciones y resultados inconsistentes.

Respecto a compatibilidad, los valores tradicionales tienen soporte muy sólido . En justificado , los motores pueden diferir en el reparto de espacios; valida si tu branding exige homogeneidad absoluta. La experiencia real del usuario manda.

Demostraciones rápidas con HTML in CSS

Uso directo en un titular centralo: un clásico que funciona para hero headings y bloques destacados.

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

Contenedor que centra el contenido inline y un párrafo justificado: combinación frecuente en artículos.

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

Uporabi text-align-last za 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 values ​​logicos start/end 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>

Y si necesitas alineación vertical en línea (por ejemplo, icono y texto): 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 escenarios de list de artículos, puedes alinear los metadatos a la derecha y el título al inicio con valores lógicos. La jerarquía visual queda clara y se adapta a la dirección del texto.

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

Če uporabljate a stojalo de tarjetas, céntralas a nivel de contenido con text-align y deja al sistem de layout (Grid/Flex) el reparto espacial. Separa responsabilidades y evita conflictos.

.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 todo el body herede una alineación por defecto, puedes aplicarlo al nivel raíz y ajustar excepciones en componentes concretos . Ten cuidado con el alcance para no centralar texto que deba ir alineado a inicio por accesibilidad.

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

La clave con text-align es entender que actúa sobre el contenido inline del contenedor, elegir el valor adecuado para el idioma y el dispositivo, y combinarlo con propiedades afines como text-align-last , direction y vertical-align cuando la situación lo requiera. Con estas pautas, lograrás resultados consistentes, lisibles y fáciles de mantener.