Propiedad CSS -tekstin tasaus: guía completa con ejemplos y soporte

Etusivu » Python » Propiedad CSS -tekstin tasaus: 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 organzar párrafos, titulares, menus o llamadas a la acción con un estilo coherente y readible.

Además de las opciones clásicas como vasemmalle, oikein, keskusta y oikeuttaa, hoy en día contamos con valores lógicos que se adaptan a la dirección del texto, como Alkaa, loppu oi mielenkiintoinen osuma-vanhempi. 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

Omaisuus text-align erityistä la alineación horizontal del contenido en línea que vive dentro de un elemento de bloque (o elementos con Comportamiento samanlainen). Ei keskusta 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.

Käytännössä, jos se on käytössä text-align on a <div> tai a <section>, afecta al texto ya todo lo que sea inline o inline-block dentro de ese contenedor: enlaces, icons inline, kuvat con display: inline, y samankaltaisia ​​elementtejä. A su vez, los descendientes pueden heredar este valor y, si lo necesitas, puedes sobrescribirlo en niveles inferiores.

Un detalle fontose es que, en la mayoría de idiomas que se escriben de izquierda a derecha (LTR), el valor por defecto de text-align es vasemmalle. 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 oikein. Por eso es útil conocer los valores lógicos como Alkaa y loppu.

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: vasemmalle (suuntautuminen irti) oikein (a la derecha) keskusta (keskipiste) y oikeuttaa (márgenes alineados repartiendo espacio entre palabras). Son los más extendidos y ampliamente soportados laivamiehille.

Además, CSS incorpora valores lógicos y de herencia muy útiles: Alkaa y loppu se adaptan a LTR/RTL sin que tengas que cambiar estilos; osuma-vanhempi calcula la alineación en función de la dirección del elemento fact y su padre; periä fuerza la herencia del valor del padre; e ensimmäinen restablece el valor al predeterminado del estándar. Estos valores facilitan la internacionalización y el mantenimiento.

On myös Comportamiento especificado pero aún sin soporte en los navegadores según la especificación: por ejemplo, combinar alku loppu para alinear la primera línea de un modo y el resto de otro, o alineaarinen yhden kadenssin verran tyypin syntaksilla text-align: "." start; para, por jeemplo, alinear números por el separador desimaali. Poika ideat kiinnostavat aún no implementadas käytännössä.

Cómo se aplica sobre distintos tipos de elementos

text-align actúa sobre el contenido inline del contenedor (teksti, inline-blocks, inline-kuvat jne.). Si quieres central 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 (esim. margin: 0 auto; con un ancho definido) o usar systems de layout modernos como Flexbox tai Grid.

Si lo que tienes es un elemento rajoitetusti riviin (kuten <span>) y haluaa soveltaa sitä text-align específico, recuerda que esta propiedad no se aplica "directamente" al inline aislado; o bien actúas en su contenedor de bloquetai conviertes ese inline en bloque käyttää kuten 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;
}

Muista myös se text-align no está pensado para alinear verticalmente. Para la alineación vertical del contenido inline existen valores de vertical-align, y para bloques o layouts Completos, flexboxiin o ruudukko suosikkivaihtoehdostaan.

Casos de uso frecuentes y eemplos

Hyvin yleinen käyttötapa on 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;
}

Eräässä navigointipalkki puedes optar por un centrado si quieres una estética equilibrada y nähtav en pantallas grandes. Funciona muy bien en webs corporativas tai aloitussivut etsii simetriaa.

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

Että alatunnisteet es habitual alinear ciertos bloques a la derecha para distinguirlos del flujo principal del texto; esimerkiksi kirjoittajan datos, enlaces legales tai iconos de redes. Ese kontraste ayuda a separar jerarquías visuales.

footer .meta {
  text-align: right;
}

En vaatii toimia (CTA) keskus, 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 centraldo refuerza la jerarquía del CTA.

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

Valores lógicos: alku, loppu y match-parent

Con idiomas LTR como el español o el inglés, aloitusekvivalentti vasemmalle y loppu vastaa oikeutta. En textos RTL (arabe, hebreo), alku on oikealla ja loppu on vasemmalla. Tällä tavalla tu CSS se adapta automaticamente a la dirección del texto ilman kaksoissääntöjä.

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

.card__meta {
  text-align: end;
}

Arvo osuma-vanhempi es samanlainen a periä, pero calcula el resultado en función de la rección del elemento todellinen ja isäsi. Es útil cuando hay mezclas de direcciones y necesitas mantener consistencia sin forzar valores absolutos.

Perustelu: legitimaciones de legibilidad

käyttö tekstin tasaus: tasaa; crea márgenes rectos a ambos lados repartiendo espacios entre palabras. Todella "toimituksellinen", 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, kuten Firefox, pueden gestionar el espaciado al justificar de forma ligamente distinta a Chrome o Safari. Ei vikaa, moottorissa on eroja. 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 de un párrafo. Ahí entre text-align-last, jotka hyväksyvät arvot kuten auto, vasemmalle, oikein, keskusta, oikeuttaa, Alkaa y loppu. Permite refinar el remate del párrafo.

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

Arvo auto suele justificar y alinear a la izquierda en kontekstissa LTR, mientras que Alkaa y loppu 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

Omaisuus direction määrittelee kirjoitussuunta dentro de un elemento: LTR tai RTL. En combinación con unicode-bidi voit forzar o anidar direcciones en textos con múltiples idiomas. Es especialmente útil en interfaces 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 */
}

yhdistää suunta kanssa valores lógicos de text-align ahorra condicionales y hojas alternativas. La maquetación se vuelve más robusta frente a cambios de idioma.

Alineación vertikaalinen: pystysuora tasaus ja vaihtoehto

No hay que confundir conceptos: text-align solo alinea en horisontaalinenVertikaalisesti, CSS-toimisto vertical-align yhteydessä contenido inline y celdas de tabla. Ei sirve para centralr bloques completos, pero sí para ajustar la línea base o colocación vertical relativa.

Arvot vertical-align joita voit käyttää: lähtötilanteessa (oletus) alla, Super, ylin, tekstin yläreuna, keskimmäinen, pohja, tekstin alaosaplus pituusasteet ja prosentit para desplazar respecto a la línea base. Son muy útiles para iconos inline, superindices tai tablas.

• lähtötilanteessa: alinea con la línea base del padre.
• alla / Super: simulaanien alaindeksit ja superindeksit.
• ylin / pohja: se alinean con el elemento más alto/bajo de la Línea.
• tekstin yläreuna / tekstin alaosa: se alinean con la parte alta/baja de la fuente del padre.
• keskimmäinen: centra aproximadamente respecto a la x-height; käytä ikoneja.
• pituusasteet/%: ajusta desplazamientos finos.

Keskittää pystysuunnassa täydelliset lohkot, on tehokkaampaa käyttää flexboxiin o CSS-ruudukko. Son sistemas diseñados para layouts y resuelven estos casos de forma fiable kussakin näkymäportissa.

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

Herencia, alcance y cómo sobrescribir

Los elementtos hijos suelen heredar-tekstin tasaus kilpailijan. Si en un <div> pones text-align: center;, todos sus párrafos e inline tienden a centralarse también. Haalariksi tarkoitettu esa herencia, establece un valor distinto en el elemento hijo.

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

kanssa 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 control Fino se logra combinando selectores correctamente.

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

Diseño reagoi mediakyselyihin

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. Con media kyselyt lo automatisas sin duplicar 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 alku/loppu fi layouts RTL/LTR sin tocar el CSS cuando cambie el idioma. Usa valores lógicos siempre que sea posible vähentämään huoltoa.

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	kuvaus
suunta	Määritä la dirección de escritura (LTR/RTL).
text-align	Controla la alineación horisontaalinen del contenido inline.
tekstin tasaus viimeiseksi	Alinea específicamente la última línea de un párrafo.
unicode-bidi	Gestiona cómo se anidan y resuelven direcciones de texto mezcladas.
vertical-align	Ajusta la alineación vertical en líneas y celdas.

Combinarlas bien te permite solver desde rajapinnat multilingües complejas hasta detalles tipográficos muy precisos en card, tablas o componentes reutilisables. Planifica valores por defecto y excepciones con cabeza.

Navigaattorien yhteensopivuus

Omaisuus 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 problems prácticamente en todas partes.

• Google Chrome: 1.0
• Internet Explorer: 3.0
• Microsoft Edge: 12.0
• firefox: 1.0
• ooppera: 3.5
• Safari: 1.0

Huomaa, että oikeutetut ystävät pueden variar entre motores (esim. Firefox frente ja Chrome/Safari). Si la apariencia precisa del justificado es cítica, valid 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;
}

Oikea: Utilities metadatos, firmas, fecha y bloques secundarios. Crea kontraste con el contenido principal.

p.derecha {
  text-align: right;
}

Keskitetty: ihanteellinen para títulos, CTA tai bloques breves donde se busca foco visual inmediato. Evítalo en párrafos largos por legibilidad.

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

Oikeutettu: estética de columna pääkirjoitus con bordes rectos. Combínalo con partición de palabras cuando proceda.

.columna {
  text-align: justify;
}

Hyviä käytäntöjä ja suosituksia

Ei oikeutettuja väärinkäytöksiä erittäin korkeat kolonnat, porque puede generar espacios irregulares. La legibilidad es prioritaria. Ajusta medidas de línea y, si es posible, habilita guiones automáticos.

Sisällä olevat maketit monikielinen, priorisoida Alkaa y loppu para adaptarte sin tocar CSS al cambiar el idioma. Te ahorra hojas duplicadas ja vähentää virheitä.

Jos ei ole inline-vastausta text-align kuten epäröin, mira el display de su contenedor. Muchas veces el problem 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 ja hauraita tyylejä.

Rajoitukset, harvinaisuudet y futuro de la especificación

La especificación contempla ideoita como alinear la primera línea distinto del resto lasketulla muistiinpanolla (alku loppu), Tai alineaarinen yhden kadenssin verran (esimerkiksi text-align: "." start;) para columnas numéricas con separador decimal. Hoy por hoy no cuentan con soporte práctico en los navegadores, pero apuntan a casos de uso reales en tablas y listados.

Muista, että text-align no resuelve la alineación vertical ni el centralo del propio bloqueEsoa varten, Yhdysvallat vertical-align (en su kontekstissa), Flexbox tai Grid. Erilliset vastuut te ahorra frustraciones y resultados inconsistentes.

Respecto a compatibilidad, los valores tradicionales tienen erittäin mukava tuki. sisään perusteltu, los motores pueden diferir en el reparto de espacios; valid si tu branding exige homogeneidad absoluta. La experiencia real del useario manda.

Esittelyt HTML:llä ja CSS:llä

Uso directo en un titular centerdo: toimiva klassinen para hero otsikot 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 parrafo 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>

käyttää tekstin tasaus viimeiseksi para destacar el cierre del párrafo: ohjaus 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>

Esimerkki logiikka-arvoista alku/loppu mitä se mukauttaa LTR/RTL:ään: ihanteellinen maailmanlaajuisille tuotteille.

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

Ja jos tarvitset alineación vertical en línea (esimerkiksi kuvakkeilla ja tekstillä): pystysuuntainen 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. 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; }

Jos käytät a teline 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 konfliktos.

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

Viimeinkin, jos haluat mitä tehdä 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 centralr texto que deba ir alineado a inicio por accesibilidad.

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

Avain kanssa 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 tekstin tasaus viimeiseksi, suunta y vertical-align cuando la situación lo requiera. Con estas pautas, lograrás resultados contractes, readibles y fáciles de mantener.