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

Головна » 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 вирівнювання тексту. Esta regla CSS determina la lineació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 akción con un estilo coherente y legible.

Además de las opciones clásicas como залишити, право, центр y виправдовувати, hoy en día contamos con valores lógicos que se adaptan a la dirección del texto, como старт, кінець або цікавий батьківський збіг. 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

Власність text-align специфіка ла 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.

На практиці, якщо застосовується text-align має a <div> або до <section>, впливати на текст, який має бути вбудований або вбудований блок dentro de ese contenedor: enlaces, iconos inline, imágenes con display: inline, й подібні елементи. 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 залишити. 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 право. Por eso es útil conocer los valores lógicos como старт y кінець.

Sintaxis básica y valores disponibles

La forma de so so es muy directa: applica 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: залишити (вирівнювання до виходу), право (а-ля дереча), центр (центральний) у виправдовувати (márgenes alineados repartiendo espacio entre palabras). Son los más extendidos y ampliamente soportados для навігаторів.

До речі, CSS містить логіку цінностей і основні функції: старт y кінець se adaptan a LTR/RTL sin que tengas que cambiar estilos; батьківський збіг calcula la alineación en función de la dirección del elemento actual y su padre; наслідувати fuerza la herencia del valor del padre; д початковий restablece el valor al predeterminado del estándar. Estos valores facilitan la internacionalización y el mantenimiento.

Існує також comportamiento especificado pero aún sin soporte en los navegadores según la especificación: por ejemplo, combinar початок кінець para alinear la primera línea de un modo y el resto de otro, o лінійний для каденції з синтаксисом типу text-align: "." start; para, por ejemplo, linear números por el separador decimal. Son ideas interesantes aún no implementadas на практиці.

Cómo se aplica sobre distintos tipos de elementos

вирівнювання тексту всередині тексту del contenedor (текст, вбудовані блоки, вбудовані зображення тощо). 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) або використовуйте сучасні системи компонування як Flexbox або Grid.

Si lo que tienes es un elemento вбудовані обмеження (як <span>) і хочете застосувати text-align específico, recuerda que esta propiedad no se aplica “directamente” al inline aislado; o bien actúas en su contenedor de bloqueабо conviertes ese inline en bloque використовувати щось як 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;
}

Також пам'ятайте про це вирівнювання тексту не має значення для лінійного вертикального вирівнювання. Para la alineación vertical del contenido inline existen valores de vertical-align, y para bloques o layouts completos, Flexbox o сітка це бажаний варіант.

Casos de uso frecuentes y ejemplos

Дуже поширене використання є 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;
}

в навігаційна панель puedes optar por un centrado si quieres una estética equilibrada y visible en pantallas grandes. Funciona muy bien en webs corporativas o landing pages який шукає симетрію.

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

На колонтитули es habitual linear ciertos bloques a la derecha para distinguirlos del flujo principal del texto; por ejemplo, datos del autor, enlaces legales o iconos de redes. Ese kontraste ayuda a separar jerarquías visuales.

footer .meta {
  text-align: right;
}

En заклики до дії (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;
}

Логічні цінності: початок, кінець і батьківський відповідник

Con idiomas LTR como el español o el inglés, початок еквівалентний лівому y кінцевий еквівалент права. En textos RTL (árabe, hebreo), початок праворуч, а кінець ліворуч. Таким чином tu CSS автоматично адаптується до напряму тексту без дублікатів правил.

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

.card__meta {
  text-align: end;
}

Значення батьківський збіг es подібний a наслідувати, pero calcula el resultado en función de la dirección del elemento actual і твій батько. Es útil cuando hay mezclas de direcciones y necesitas mantener consistencia sin forzar valores absolutos.

Justificado: consideraciones de legibilidad

Використовуйте вирівнювання-тексту: по ширині; crea márgenes rectos a ambos lados repartiendo espacios entre palabras. Дуже «редакційна» стаття, 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, як Firefox, pueden gestionar el espaciado al justificar de forma ligamente distinta a Chrome або Safari. Немає помилок, китайських відмінностей двигуна. Si el justificado es crítico para tu diseño, prueba en varios navegadores.

text-align-last: контроль останнього рядка

Cuando justificas o alineas bloques complejos, puede interesarte indicar cómo se alinea la última línea з парафо. Ах, увійти text-align-last, які визнають цінності як автоматичний, залишити, право, центр, виправдовувати, старт y кінець. Permite refinar el remate del párrafo.

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

Значення автоматичний suele justificar y alinear a la izquierda en contextos LTR, mientras que старт y кінець respetan la dirección del texto. Es una forma fina de controlar el ritmo del párrafo sin romper la estética general.

Direction del texto y combinación con unicode-bidi

Власність direction визначає напрямок письма dentro de un elemento: LTR або RTL. En combinación con unicode-bidi Ви можете шукати або скидати напрямки en textos conúltiples idiomas. Es especialmente útil en інтерфейси багатомовні 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 */
}

Об’єднайте напрям з логіка вирівнювання тексту ahorra condicionales y hojas alternativas. La maquetación se vuelve más robusta frente a cambios de idioma.

Вертикальна лінія: вертикальне вирівнювання й альтернативи

No hay que confundir conceptos: вирівнювання тексту окремо по горизонталіДля вертикального монтажу, CSS-офіс vertical-align в контексті 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.

значення vertical-align які ви можете використовувати: базова лінія (за замовчуванням), нижче, супер, топ, верхній текст, середній, нижній, текст-знизу, Plus довготи та координати para desplazar respecto a la línea base. Інші вбудовані елементи для піктограм, суперіндекси або таблиці.

• базова лінія: alinea con la línea base del padre.
• нижче / супер: симуляційні субіндекси та суперіндекси.
• топ / нижній: se alinean con el elemento más alto/bajo de la línea.
• верхній текст / текст-знизу: se alinean con la parte alta/baja de la fuente del padre.
• середній: centra aproximadamente respecto a la x-height; útil con iconos.
• довготи/%: ajusta desplazamientos finos.

Для вертикального центрування повні блоки, це найефективніше використання Flexbox o Сітка CSS. Son sistemas diseñados para layouts y resuelven estos casos de forma fiable у будь-якому вікні перегляду.

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

Herencia, alcance y cómo sobrescribir

Сухі діти вирівнювання тексту heredar дель contenedor. Якщо <div> понес text-align: center;, todos sus párrafos e inline tienden a centralarse también. Для цього комбінезона, establece un valor distinto en el elemento hijo.

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

з combinadores y selectores de mayor especificidad puedes ajustar alineaciones en nodos concretos: por ejemplo, alinear a la derecha solo los últimos elementos de una list 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 медіа-запити

Це звичайний перехід 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. З автоматизованими медіа-запитами без дублювання HTML.

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

También puedes centralr títulos y botones en vistas pequeñas y colocarlos a початок/кінець en layouts RTL/LTR sin tocar el CSS cuando cambie el idioma. Usa valores lógicos siempre que sea posible щоб зменшити витрати на технічне обслуговування.

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:

Майно	Опис
напрям	Визначте la dirección de escritura (LTR/RTL).
вирівнювання тексту	Controla la lineación horizontal del contenido inline.
вирівнювання-тексту-останнім-сторінкою	Alinea específicamente la última linea de un párrafo.
Юнікод-біді	Gestiona cómo se anidan y resuelven direcciones de texto mezcladas.
вертикальне вирівнювання	Ajusta la alineación vertical en líneas y celdas.

Combinarlas bien te permite resolver desde багатомовні інтерфейси hasta detalles tipográficos muy precisos en cards, tablas or componentes reutilizable. Planifica valores por defecto y excepciones con cabeza.

Сумісність навігаторів

Власність 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

Майте на увазі, що виправдані матері можна змінювати двигуни (наприклад, Firefox і Chrome/Safari). Si la apariencia precisa del justificado es crítica, valida el resultado visual en los navegadores objectivo.

Ejemplos rápidos de valores tradicionales

Isquierda (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;
}

Праворуч: útil para metadatos, firmas, fecha y bloques secundarios. Crea contracte con el contenido principal.

p.derecha {
  text-align: right;
}

По центру: ideal para títulos, CTA o bloques breves donde se busca foco visual inmediato. Evítalo en párrafos largos por legibilidad.

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

Виправдано: estética de columna editorial con bordes rectos. Combínalo con partición de palabras cuando proceda.

.columna {
  text-align: justify;
}

Хороші практики та рекомендації

Ніяких виправданих зловживань дуже довгі колони, porque puede generar espacios irregulares. Розбірливість є пріоритетною. Ajusta medidas de línea y, si es posible, habilita guiones automáticos.

Коли макети всередині багатомовний, пріоритезувати старт y кінець para adaptarte sin tocar CSS al cambiar el idioma. Тебе тепер дублікують листи і зменшує кількість помилок.

Якщо всередині тексту немає відповіді text-align як сподіватися, 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 «база» y dónde se permiten excepciones. Una jerarquía clara evita sobrescrituras innecesarias і крихкі стилі.

Limitaciones, rarezas y futuro de la especificación

La especificación contempla ideas como alinear la primera línea distinto del resto з обчисленою запискою (початок кінець) лінійний для каденції (наприклад, text-align: "." start;) для числових стовпців із десятковим роздільником. Hoy por hoy no cuentan con soporte práctico en los navegadores, pero apuntan a casos de uso reales en tablas y listados.

Запам'ятати text-align no resuelve la lineación vertical ni el centralo del propio bloqueДля цього, США вертикальне вирівнювання (у контексті), Flexbox або Grid. Розділення обов'язків te ahorra frustraciones y resultados inconsistentes.

Respecto a compatibilidad, los valores tradicionales tienen дуже тверда підтримка, в виправданий, los motores pueden diferir en el reparto de espacios; valida si tu branding exige homogeneidad absoluta. La experiencia real del usuario manda.

Швидкі демонстрації HTML і CSS

Uso directo en un titular centralo: класичний варіант, який працює para hero headings y bloques destacados.

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

Contenedor que central 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>

aplicar вирівнювання-тексту-останнім-сторінкою para destacar el cierre del párrafo: контроль 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>

Приклад з логічними цінностями початок/кінець що адаптується для LTR/RTL: ідеально для світових продуктів.

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

І якщо вам потрібно alineación vertical en línea (наприклад, значок і текст): 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 linear 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; }

Якщо ви використовуєте стійка de tarjetas, céntralas a nivel de contenido con text-align y deja al system 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; }

Останнім часом, якщо ви цього хочете все тіло 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 central texto que deba ir alineado a inicio por accesibilidad.

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

Клав кон вирівнювання тексту 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 вирівнювання-тексту-останнім-сторінкою, напрям y вертикальне вирівнювання cuando la situación lo requiera. Con estas pautas, lograrás resultados consistentes, legibles y fáciles de mantener.