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

Начало » Питон » 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, menús o llamadas a la ació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 lineas de texto y drugi elementi inline/inline-block en su interior.

На практика, ако се прилага text-align към a <div> или към a <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 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 valures 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: наляво (подравняване към изхода), прав (на място), център (централно) y оправдае (márgenes alineados repartiendo espacio entre palabras). Son los más extendidos y ampliamente soportados за пътешествениците.

Освен това, CSS включва логически стойности и много полезни елементи: Начало y край се адаптира към LTR/RTL без que tengas que cambiar stilos; съвпадение-родител 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; пара, por ejemplo, линейни числа за десетичен разделител. Son ideas interesantes aún no implementadas на практика.

Cómo se aplica sobre distintos tipos de elementos

подравняване на текста е вградено в съдържанието част от съдържанието (текст, вградени блокове, вградени изображения и т.н.). 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, centerar 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 periodicos. 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 целеви страници който търси симетрия.

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

В долни колонтитули es habitual alinear ciertos bloques a la derecha para distinguirlos del flujo principal del texto; por ejemplo, datos del autor, enlaces legales or 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;
}

Valores logicos: начало, край и съвпадение-родител

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

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

.card__meta {
  text-align: end;
}

Стойността съвпадение-родител е подобно на наследят, pero calcula el resultado en función de la derecció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 o 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 linea от един парафо. Влез. 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.

Dirección 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 specialmente ú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 които можете да използвате: изходно ниво (по подразбиране), под, супер, връх, текст-горе, среден, дъно, текст-долу, в допълнение към географски дължини и проценти para desplazar respecto a la linea 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.
• среден: centar 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 на съдията. Ако е <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 */
}

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 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 centralar 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 línea de un párrafo.
unicode-bidi	Gestiona cómo se anidan y resuelven direcciones de texto mezcladas.
вертикално подравняване	Ajusta la alineación vertical en lineas y celdas.

Combinarlas bien te permite resolver desde мултиезични интерфейси complejas hasta detalles tipográficos muy precisos en карти, таблици или компоненти за повторно използване. Planifica valores por defecto y excepciones con cabeza.

Съвместимост на навигаторите

Собствеността подравняване на текста con soporte muy amplio desde versiones iniciales en los navegadores modernos, por lo que puedes usarla con tranquilidad en proyectos de producción. Los valures 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 objetivo.

Ejemplos rápidos de valores tradicionales

Извикване (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 kontraste con el contenido principal.

p.derecha {
  text-align: right;
}

Центрадо: идеални за заглавия, CTA или къси блокове donde se busca foco визуално 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 край за адаптиране на CSS алтернативен идиом. Сега имаш дублирани листа и намалява грешките.

Ако в текста няма отговор 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 complejos 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 с изчислена бележка (начало край), A алинеарен по каденя (например 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 alineación vertical ni el centralo del propio bloqueЗа това, САЩ вертикално подравняване (в контекста), Flexbox или Grid. Разделяне на отговорности te ahorra frustraciones y resultados inconsistentes.

Respecto a compatibilidad, los valores tradicionales tienen много солидна опора, En обосновано, 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 centrado: класически, който функционира за геройни заглавия и дестакадни блокове.

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

Contenedor que center 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 подравняване-на-текста-последно за 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 alinear los metadatos a la derecha y el título al inicio con valures logicos. 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.