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

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

Cuando trabajas con maquetación web, controlar como se distribuye el texto en un blok es basic, y ahí entra en juego la propiedad text-align. Esta regla CSS determina la alineación horizontal del contenido en linea dentro de un elemento contenedor, y es clave para organizar párrafos, titulares, menus o llamadas a la acción con un estilo coherente y čitateľné.

Además de las opciones clásicas como ľavý, presne, centrum y zdôvodniť, hoy en día contamos con valores lógicos que se adaptan a la dirección del texto, como Začať, koniec alebo zaujímavý rodičovský pár. Estas variantes facilitan la internacionalización (LTR/RTL) y evitan tener que reescribir estilos cuando cambian los idiomas o la dirección de escritura.

Zarovnanie textu a zarovnanie textu

Vlastníctvo text-align špecificky la alineación horizontal del contenido en línea que vive dentro de un elemento de bloque (o elementos con comportamiento podobné). Žiadne centrum 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.

V praxi, ak sa uplatní text-align má a <div> alebo <section>, afecta al texto ya todo lo que sea inline alebo inline-block dentro de ese contenedor: enlaces, iconos inline, imágenes con display: inline, podobné prvky. 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 defekto de text-align es ľavý. Cuando el documento o el contenedor está en derecha a izquierda (RTL), el comportamiento por defekto cambia y la alineación natural pasa a ser presne. Por eso es útil conocer los valores lógicos como Začať y koniec.

Sintaxis básica y valores disponibles

Forma použitia je môj priamy: 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: ľavý (zarovnanie podľa výrezu), presne (na prahu), centrum (centrálne) y zdôvodniť (márgenes alineados repartiendo espacio entre palabras). Son los más extendidos y ampliamente soportados pre navigátorov.

Además, CSS incorpora valores lógicos y de herencia muy utilities: Začať y koniec adaptan a LTR/RTL sin que tengas que cambiar estilos; rodičovský pár calcula la alineación en función de la dirección del elemento Actual y su padre; zdediť fuerza la herencia del valor del padre; e počiatočné restablece el valor al predeterminado del estándar. Estos valores facilitan la internacionalización y el mantenimiento.

Je tu tiež comportamiento especificado pero aún sin soporte en los navegadores sagún la especificación: por ejemplo, combinar začiatok koniec para alinear la primera línea de un modo y el resto de otro, o alineárny podľa kadencie so syntaxou typu text-align: "." start; para, por ejemplo, alinear numeros por el separador desiatkový. Son ideas interesantes aún no implementadas v praxi.

Cómo sa aplica sobre distintos tipos de elementos

text-align actúa sobre el contenido inline del contenedor (text, inline-blocks, imágenes inline atď.). Si quieres centraler un elemento inline, puede basstar con que el contenedor tenga text-align: center;. En cambio, para central el el propio contenedor de bloque necesitas otras técnicas (por ejemplo, margin: 0 auto; con un ancho definido) o používanie moderných systémov rozloženia ako Flexbox alebo Grid.

Si lo que tienes es un elemento vložené obmedzenia (ako <span>) a chcete použiť text-align específico, recuerda que esta propiedad no sa aplica “directamente” al inline aislado; o bien actúas en su contenedor de bloquealebo conviertes ese inline en blok použiť niečo ako 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;
}

Pamätajte si to tiež text-align no está pensado para alinear verticalmente. Para la alineación vertical del contenido inline existen valores de vertical-align, y para bloques alebo layouts completeos, flexboxu o mriežka je to preferovaná možnosť.

Casos de uso frecuentes y ejemplos

Veľmi bežné použitie je alineación de encabezados y párrafos de una sección. Napríklad, stredná časť titulnej časti je vizuálna, 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;
}

V jednom navigačná lišta puedes optar por un centraldo si quieres una estética equilibrada y visible en pantallas grandes. Funkcie mnohých webových spoločností a vstupných stránok hľadá simetriu.

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

V päty es habitual alinear ciertos bloques a la derecha para distinguirlos del flujo principál del texto; por ejemplo, dates del autor, enlaces legales alebo iconos de redes. Toto je v kontraste so samostatnými vizuálmi.

footer .meta {
  text-align: right;
}

En výzvy na akciu (CTA) centraldas, el mensaje destaca rápidamente y facilita el clic en mobile. Puedes combinar un fundo lamativo con texto centraldo para crear un bloque que capte la atención. El centraldo refuerza la jerarquía del CTA.

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

Valores lógicos: začiatok, koniec zápasu – rodič

Idiomas LTR ako español alebo el inglés, začiatočný ekvivalent a vľavo y koniec ekvivalentu práva. Text RTL (arabe, hebreo), začiatok je vpravo a koniec je vľavo, Týmto spôsobom tu CSS sa adapta automáticamente a la dirección del texto bez duplicitných pravidiel.

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

.card__meta {
  text-align: end;
}

Hodnota rodičovský pár je podobný zdediť, pero calcula el resultado en función de la skutočný smer elementu a tvoj otec. Es útil cuando seno mezclas de direcciones y necesitas mantener konzistentnosť sin forzar valores absolutos.

Odôvodnenie: zvažovanie legibilidad

použitie zarovnanie textu: zarovnať; crea márgenes rectos a ambos lados repartiendo espacios entre palabras. Veľmi „úvodnícky“, 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, ako Firefox, Pueden gestionar el espaciado al justificar de forma ligeramente distinta a Chrome alebo Safari. Žiadna chyba, rozdiel v motore. Si el justificado es critico 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 z páru. Ahoj, vstúp. text-align-last, ktoré pripúšťam ako hodnoty auto, ľavý, presne, centrum, zdôvodniť, Začať y koniec. Povoľte refinar el remate del párrafo.

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

Hodnota auto suele justificar y alinear a la izquierda en contextos LTR, mientras que Začať y koniec Repetan la dirección del texto. Es una finale de controlar el ritmo del párrafo sin romper la estética general.

Smerovanie textu a kombinácie s unicode-bidi

Vlastníctvo direction definuje smer písania dentro de un elemento: LTR alebo RTL. En combinación con unicode-bidi môžete smery en texty s viacerými idiomatami. Toto je špeciálne použitie vo viacjazyčných rozhraniach o cuando insertas términos arabes 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 */
}

kombinovať smer s valores lógicos de text-align ahorra condicionales y hojas alternatívas. La maquetación sa vuelve má robustnú frente a idioma.

Vertikálne nastavenie: vertikálne zarovnanie a alternatívy

No hay que conundir conceptos: text-align solo alinea en horizontalPre vertikálne, CSS kancelárie vertical-align v kontexte contenido inline a celdas de tabla. Žiadne sirve para centralar bloques completos, pero sí para ajustar la línea base o colocación vertical relativa.

Hodnoty vertical-align ktoré môžete použiť: základné (predvolené), nižšie, super, top, text-hore, prostredný, spodnej, text-doleokrem zemepisné dĺžky a percentá para desplazar respekto a la línea základňa. Son muy útiles para iconos inline, superindices alebo tablas.

• základné: alinea con la línea base del padre.
• nižšie / super: simulan subíndices y superíndices.
• top / spodnej: se alinean con el elemento más alto/bajo de la línea.
• text-hore / text-dole: alinean con la parte alta/baja de la fuente del padre.
• prostredný: stred aproximadamente vzhľadom na la x-výšku; útil con iconos.
• zemepisné dĺžky/%: ajusta desplazamientos finos.

Vertikálne centrálne kompletné bloky, je to efektívnejšie použitie flexboxu o Mriežka CSS. Son sistemas diseñados para layouts y resuelven estos casos de form fiable v každom výreze.

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

Herencia, alcance y cómo sobrescribir

Suelenské prvky detí zarovnanie textu heredar od kontendera. Si en un <div> pony text-align: center;, todos sus párrafos e inline tienden a centralse también. Pre tento overal, establece un valor distinto en el elemento hijo.

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

s 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 centraldo. Ovládanie je správne kombinované.

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

Neodpovedajte na mediálne dotazy

Je to zvyčajná zmena 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. Dotazy na médiá v automatizácii s duplikovaným 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 začiatok/koniec sk layouty RTL/LTR sin tocar el CSS cuando cambie el idioma. Usa valores lógicos siempre que sea posible aby sa znížila údržba.

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:

vlastnosť	popis
smer	Definujte smer písania (LTR/RTL).
text-align	Ovládanie horizontálnej línie v rade.
zarovnanie textu na poslednú chvíľu	Alinea específicamente la última línea de un párrafo.
unicode-bidi	Gestiona como sa anidan a resuelven direcciones de texto mezcladas.
vertikálne zarovnať	Ajusta la alineación vertical en líneas y celdas.

Kombinácia vám umožní vyriešiť problém viacjazyčné rozhrania hasta detalles tipográficos muy precisos en karty, tably alebo komponenty reutilizables. Planifica valores por defekto y excepciones con cabeza.

Kompatibilita navigátorov

Vlastníctvo 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

Majte na pamäti, že oprávnené osoby pueden variar entre motores (napr. Firefox frente a Chrome/Safari). Si la apariencia precisa del justificado es critica, valida el resultado visual en los navegadores objetivo.

Ejemplos rápidos de valores tradicionales

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

Správny: útil para metadatos, firmas, fecha y bloques secundarios. Vytvorenie kontrastu s hlavným obsahom.

p.derecha {
  text-align: right;
}

Vycentrované: ideálne 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;
}

Odôvodnený: estética de columna editorial con bordes rectos. Combinalo con partición de palabras cuando proceda.

.columna {
  text-align: justify;
}

Osvedčené postupy a odporúčania

Žiadne opodstatnené zneužívanie veľmi úzke stĺpce, porque puede generar espacios nepravidelné. Čitateľnosť je prioritná. Ajusta medidas de línea y, si es posible, habilita guiones automáticos.

Keď sa maquety usadia viacjazyčný, uprednostniť Začať y koniec para adaptarte sin tocar CSS al cambiar el idioma. Teraz máš duplikované listy a znižuje chyby.

Ak v texte nie je odpoveď text-align ako dúfam, 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.

Kompletné komponenty s rôznymi capas, documenta dónde se establece la alineación “základňa” y dónde se permiten excepciones. Una jerarquía clara evita sobrescrituras innecesarias a krehké štýly.

Limitaciones, rarezas y futuro de la especificación

La especificación contempla ideas como alinear la primera línea distinto del resto s vypočítanou poznámkou (začiatok koniec), alineárny podľa kadencie (napríklad text-align: "." start;) para columnas numéricas con separador desiatkové. Hoy por hoy no cuentan con soporte práctico en los navegadores, pero apuntan a casos de uso reales en tablas y listados.

Pamätať text-align no resuelve la alineación vertical ni el centraldo del propio bloquePre toto, USA vertikálne zarovnať (v kontexte), Flexbox alebo Grid. Oddeliť zodpovednosti te ahorra frustraciones y resultados inconsistentes.

Respecto a compatibilidad, los valores tradicionales tienen veľmi pevná podpora. V odôvodnený, los motores pueden diferir en el reparto de espacios; valida si tu branding exige homogeneidad absoluta. Skutočná skúsenosť s užívaním.

Demostraciones rapidas con HTML a CSS

Použite v titulnom centre: klasika, ktorá funguje para hrdina nadpisy y bloques destacados.

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

Contenedor que central el contenido inline and un párrafo opodstatnené: 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 zarovnanie textu na poslednú chvíľu para destacar el cierre del párrafo: ovládať 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>

Príklad s logickými hodnotami začiatok/koniec ktoré sa prispôsobujú LTR/RTL: ideálne pre globálne produkty.

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

A ak potrebujete alineación vertical en línea (napríklad ikona a text): vertikálne zarovnať 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 lista de artículos, puedes alinear los metadatos a la derecha y el título al inicio con valores lógicos. Vizuálna queda clara y se adapta a la dirección del texto.

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

Ak použijete a stojan de tarjetas, céntralas a nivel de contenido con text-align y deja al system de layout (Grid/Flex) el reparto espacial. Oddelené zodpovednosti a konflikty.

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

Naposledy, ak to chcete všetko telo herede una alineación por defekto, puedes aplicarlo al nivel raíz y ajustar excepciones en componentes concretos. Desať požiadaviek, ktoré sa vzťahujú na žiadny centrálny text, ktorý sa nachádza na začiatku prístupu.

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

Kľúč s 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 zarovnanie textu na poslednú chvíľu, smer y vertikálne zarovnať cuando la situácia lo requiera. Con estas pautas, lograrás resultados konzistentnes, čitateľnosť y fáciles de mantener.