Propiedad CSS text-align: guía komplett med ejemplos y soporte

Hem » Python » Propiedad CSS text-align: guía komplett med 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 horisontell del contenido en línea dentro de un elemento contenedor, y es clave para organizar párrafos, titulares, menús o llamadas a la acción con un estilo coherente y läsbar.

Además de las opciones clásicas como vänster, höger, centrum y rättfärdiga, hoy en día contamos con valores lógicos que se adaptan a la dirección del texto, como starta, änden det intressanta match-förälder. 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é sirve

Egendomen text-align specifikt la alineación horisontell del contenido en línea que vive dentro de un elemento de bloque (o elementos con comportamiento liknande). Ingen 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 otros elementos inline/inline-block en su interior.

I praktiken, om det gäller text-align till a <div> eller till <section>, afecta al texto ya todo lo que sea inline o inline-block dentro de ese contenedor: enlaces, iconos inline, bilder med display: inline, och liknande element. 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 vänster. Cuando el documento o el contenedor está en derecha a izquierda (RTL), el comportamiento por defecto cambia y la alineación naturlig pasa a ser höger. Por eso es útil conocer los valores lógicos como starta y änden.

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: vänster (anpassning till utsidan) höger (à la derecha), centrum (centrum) y rättfärdiga (márgenes alineados repartiendo espacio entre palabras). Son los mer extendidos y ampliamente soportados av navigatörerna.

Además, CSS innehåller valores logicos y de herencia muy uteles: starta y änden se anpassningen till LTR/RTL för att skapa estilos; match-förälder calcula la alineación en función de la dirección del elemento faktiska y su padre; ärva fuerza la herencia del valor del padre; e inledande restablece el valor al predeterminado del estándar. Estos valores facilitan la internacionalización y el mantenimiento.

Det finns också comportamiento especificado pero aún sin soporte en los navegadores según la especificación: por ejemplo, combinar början slut para alinear la primera línea de un modo y el resto de otro, o alinear per una cadena med en typ av syntaxis text-align: "." start; para, por ejemplo, alinear números por el separador decimal. Son ideas interesantes aún no implementadas i praktiken.

Cómo se aplica sobre distintos tipos de elementos

text-align actúa sobre el contenido inline del contenedor (text, inline-block, bilder inline, etc.). Si quieres centrar un elemento inline, puede bastar con que el contenedor tenga text-align: center;. En cambio, para centrar el propio contenedor de bloque necesitas otras técnicas (av ejemplo, margin: 0 auto; con un ancho definido) o usar system de layout modernos como Flexbox o Grid.

Si lo que tienes es un elemento begränsad inline (som en <span>) och vill tillämpa en text-align específico, recuerda que esta propiedad no se aplica "directamente" al inline aislado; o bien actúas en su contenedor de bloqueen conviertes ese inline en bloque använder något liknande 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;
}

Kom också ihåg det text-align no está pensado para alinear verticalmente. Para la alineación vertikal del contenido inline existen valores de vertical-align, y para bloques o layouts completos, Flexbox o Rutnät är det föredragna alternativet.

Casos de uso frecuentes y emplos

En mycket vanlig användning är det alineación de encabezados y párrafos de una sección. Por ejemplo, centrar un titular puede dar más énfasis visual, mientras que un parrafo 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;
}

i en navigeringsfält puedes optar por un centrado si quieres una estética equilibrada y visible en pantallas grandes. Funciona muy bien en webs corporativas o målsidor som söker simmetria.

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

I fotnoter es habitual alinear ciertos bloques a la derecha para distinguirlos del flujo principal del texto; por ejemplo, datos del autor, enlaces legales o iconos de redes. Detta kontrasterar ayuda och separar jerarquías visuals.

footer .meta {
  text-align: right;
}

En uppmaningar till handling (CTA) centradas, el mensaje destaca rápidamente y facilita el clic en mobile. Puedes combinar un fondo llamativo con texto centrado 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;
}

Valores lógicos: start, slut y match-förälder

Con idiomas LTR como el español o el inglés, start motsvarande en vänster y slut motsvarighet till en rättighet. En textos RTL (árabe, hebreo), börjar till höger och slutar till vänster. På detta sätt tu CSS anpassas automatiskt till texten utan duplicerade regler.

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

.card__meta {
  text-align: end;
}

Värdet match-förälder es liknande a ärva, men calcula el resultado en función de la riktning del elemento faktiska och din far. Es útil cuando hay mezclas de direcciones y necesitas mantener consistencia sin forzar valores absolutos.

Justificado: consideraciones de legibilidad

Tillämpa text-justera: justera; crea márgenes rectos a ambos lados repartiendo espacios entre palabras. Det är väldigt "redaktionellt", men det är möjligt att använda linjen och interletrado para evitar "ríos" visuals, 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, som Firefox, pueden gestionar el espaciado al justificar de forma ligeramente distinta a Chrome o Safari. Inget fel, motorns skillnader. Si el justificado es crítico para tu diseño, prueba en varios navegadores.

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

Cuando justificas o alineas bloques complejos, puede interesarte indicar cómo se alinea la última línea från en pärla. Åh, entré text-align-last, som erkänner värden som bil, vänster, höger, centrum, rättfärdiga, starta y änden. Permite refinar el remate del párrafo.

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

Värdet bil suele justificar y alinear a la izquierda en contextos LTR, mientras que starta y änden 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

Egendomen direction definierar skrivriktning dentro de un elemento: LTR eller RTL. En combinación con unicode-bidi du kan försvaga eller anidar riktningar en textos con múltiples idiomas. Es especialmente util en gränssnitt multilingües 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 */
}

Kombinera riktning med valores logicos de text-align ahorra condicionales y hojas alternativas. La maquetación se vuelve más robusta frente a cambios de idioma.

Alineación vertikal: vertikaljustera och alternativ

Det finns inga problem: text-align solo alinea en horizontalFör vertikalt, CSS-kontor vertical-align i sammanhanget contenido inline y celdas de tabla. Inga sirve para centrar bloques kompletta, pero sí para ajustar la línea bas o colocación vertikal relativa.

Värden för vertical-align som du kan använda: baslinje (standard), nedan, super, topp, text-topp, mitten, botten, text-botten, Plus longituder och procentandelar para desplazar respecto a la línea bas. Sonen har mycket uteles för ikoner inline, superindices eller tablas.

• baslinje: alinea con la línea bas del padre.
• nedan / super: simulan subíndices y superíndices.
• topp / botten: se alinean con el elemento más alto/bajo de la línea.
• text-topp / text-botten: se alinean con la parte alta/baja de la fuente del padre.
• mitten: centra aproximadamente respecto a la x-höjd; util con iconos.
• longituder/%: ajusta desplazamientos finos.

Vertikalt centralt kompletta block, det är mer effektivt att använda Flexbox o CSS-rutnät. Son system diseñados para layouts y resuelven estos casos de forma fiable i varje vyport.

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

Herencia, alcance y cómo sobrescribir

Barnens element suelen här textjustering del contenedor. Om det är en <div> du sätter text-align: center;, todos sus párrafos e inline tienden a centrarse también. För en sparkdräkt, establece un valor distinto en el elemento hijo.

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

med 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 centrado. El kontroll fino se logra combinando selectores correctamente.

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

Diseño responsivo y media queries

Det är vanligt att ändra 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. Med medieförfrågningar som automatiseras med dubbla HTML.

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

También puedes centrar titulos y botones en vistas pequeñas y colocarlos a början/slut en layouter RTL/LTR sin tocar el CSS cuando cambie el idioma. Usa valores lógicos siempre que sea posible för att minska underhållet.

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:

Propiedad	beskrivning
riktning	Definiera anvisningarna (LTR/RTL).
text-align	Controla la alineación horisontell del contenido inline.
text-just-sist	Alinea específicamente la última línea de un párrafo.
unicode-bidi	Gestiona cómo se anidan y resuelven direcciones de texto mezcladas.
vertikaljustera	Ajusta la alineación vertikal en líneas y celdas.

Combinarlas bien te permite resolver desde gränssnitt multilingües complejas hasta detaljer tipográficos muy precisos en kort, tabeller eller komponenter återanvändbara. Planifica valores por defecto y excepciones con cabeza.

Navigatorkompatibilitet

Egendomen 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 opera synd 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

Tänk på det de rättfärdigade Pueden variar entre motores (till exempel, Firefox frente och Chrome/Safari). Si la apariencia precisa del justificado es crítica, valida el resultado visual en los navegadores objetivo.

Exemplos rápidos de valores tradicionales

Izquierda (av 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;
}

Rätt: util para metadatos, firmas, fecha y bloques secundarios. Crea contraste con el contenido principal.

p.derecha {
  text-align: right;
}

Centrerad: idealisk för titeln, CTA eller bloques breves donde se busca foco visual inmediato. Evítalo en párrafos largos por legibilidad.

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

Berättigad: estética de columna redaktionell con bordes rectos. Combínalo con partición de palabras cuando proceda.

.columna {
  text-align: justify;
}

God praxis och rekommendationer

Inga rättfärdigade övergrepp mycket rädda kolumner, porque puede generar espacios irregulares. Läsbarheten är prioriterad. Ajusta medidas de línea y, si es posible, habilita guiones automáticos.

När det är tyg i sängen flerspråkig, prioritera starta y änden para adaptarte sin tocar CSS al cambiar el idioma. Du har dubbletthus nu och minskar fel.

Om ett inline-svar inte är aktiverat text-align hur man förväntar sig, mira el display de su contenedor. Mycket 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 "bas" y dónde se permiten excepciones. Una jerarquía clara evita sobrescrituras innecesarias och bräckliga stilar.

Begränsningar, sällsynta och framtida specifikation

La especificación contempla ideas como alinear la primera línea distinto del resto med en beräkningsanteckning (början slut) En alinear per una cadena (till exempel, text-align: "." start;) para columnas numéricas con separador decimal. Hoy por hoy no cuentan con soporte práctico en los navegadores, men apuntan a casos de uso reales en tablas y listados.

Kom ihåg att text-align no resuelve la alineación vertikal ni el centrado del propio bloqueFör detta ändamål, USA vertikaljustera (en su contexto), Flexbox o Grid. Separera ansvarsområden te ahorra frustraciones y resultados inconsistentes.

Respecto a compatibilidad, los valores tradicionales tienen mycket solid stöd. I motiverat, 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 med HTML och CSS

Använd direkt till en titelcentral: en klassiker som fungerar 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>

ansöka text-just-sist para destacar el cierre del párrafo: kontrollera 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>

Exempel på logiska värden början/slut som anpassar sig till LTR/RTL: idealisk för globala produkter.

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

Och om du behöver alineación vertikal en línea (till exempel ikon och text): vertikaljustera te saca del apuro.

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

En escenario de lista 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; }

Om du använder en kuggstång de tarjetas, céntralas a nivel de contenido con text-align y deja al systema de layout (Grid/Flex) el reparto espacial. Separat ansvar och evita konflikter.

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

Slutligen, om du vill ha det att göra på kroppen 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 centrar texto que deba ir alineado a inicio por accesibilidad.

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

Nyckeln med 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-just-sist, riktning y vertikaljustera cuando la situación lo requiera. Con estas pautas, lograrás resultados consistentes, readibles y fáciles de mantener.