CSS ટેક્સ્ટ-સંરેખિત: valores, usos, RTL y ejemplos prácticos

મુખ્ય પૃષ્ઠ » પાયથોન » Propiedad CSS text-align: guía completa con ejemplos y soporte

ટેક્સ્ટ-સંરેખિત alinea horizontalmente el contenido inline: ડાબે, જમણે, મધ્યમાં, ન્યાયી, પ્રારંભ, અંત અને મેચ-પેરેન્ટ.
LTR/RTL સાથે અનુકૂલનશીલ મૂલ્યો (પ્રારંભ/અંત); લખાણ-સંરેખિત-છેલ્લું afina la última linea.
સુસંગતતા મ્યુ એમ્પલિયા; el justificado puede variar entre motores como Firefox y Chrome.

CSS સાથે ટેક્સ્ટ જોડાણ

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 alineació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 acció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 શરૂઆત, અંત રસપ્રદ મેચ-પેરેન્ટ. ઇન્ટરનેશનલાઇઝેશનની સુવિધા (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

મિલકત text-align સ્પષ્ટીકરણ લા alineación horizontal del contenido en línea que vive dentro de un elemento de bloque (o elementos con comportamiento similar). નો સેન્ટ્રા ની ડેસપ્લાઝા એલ પ્રોપિયો બ્લોક (પેરા એસો હે otras técnicas), sino que controla cómo se alinean las lineas de texto y otros elementos inline/inline-block en su interior.

વ્યવહારમાં, જો જરૂરી હોય તો text-align પાસે છે <div> અથવા એક <section>, afecta al texto ya todo lo que sea inline o inline-block dentro de ese contenedor: enlaces, iconos inline, imágenes con display: inline, સમાન તત્વો y. 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 અંત.

સિન્ટેક્સિસ બેઝિક વાય વેલોરેસ ડિસ્પોનિબલ્સ

લા ફોર્મા ડી યુસો એ મ્યુ ડાયરેક્ટ: 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: બાકી (એલિનેસિઓન એ લા ઇઝક્વિર્ડા), અધિકાર (એ લા ડેરેચા), કેન્દ્ર (સેન્ટ્રેડો) y સર્મથન (Márgenes alineados repartiendo espacio entre palabras). Son los más extendidos y ampliamente soportados પોર લોસ નેવેગાડોર્સ.

Además, CSS incorpora valores lógicos y de herencia muy útiles: શરૂઆત y અંત LTR/RTL sin que tengas que cambiar estilos માટે અનુકૂલન કરો; મેચ-પેરેન્ટ calcula la alineación en función de la dirección del elemento atual y su padre; વારસો ફ્યુર્ઝા લા હેરેન્સિયા ડેલ બહાદુરી ડેલ પેડ્રે; ઇ પ્રારંભિક restablece el valor al predeterminado del estándar. એસ્ટોસ વેલોરેસ ફેસિલિટન લા ઇન્ટરનેશનલાઇઝેશન વાય એલ મેનટેનિમિએન્ટો.

ત્યાં પણ છે comportamiento especificado pero aún sin soporte en los navegadores según la especificación: por ejemplo, combinar શરૂઆતનો અંત para alinear la primera linea de un modo y el resto de otro, o એલિનિયર પોર ઉના કેડેના પ્રકાર સાથે સિન્ટેક્સિસ text-align: "." start; para, por ejemplo, alinear números por el separador decimal. પુત્ર વિચારો રસપ્રદ છે અને કોઈ અમલીકરણ નથી વ્યવહારમાં.

Cómo se aplica sobre distintos tipos de elementos

ટેક્સ્ટ-સંરેખિત એક્ટ્યુઆ સોબ્રે એલ કોન્ટેનિડો ઇનલાઇન del contenedor (texto, inline-blocks, imagees 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 (ઉદાહરણ તરીકે, margin: 0 auto; con un ancho definido) o usar sistemas de layout modernos como Flexbox o Grid.

Si lo que tienes es un elemento પ્રતિબંધિત ઇનલાઇન (એક તરીકે <span>) y quieres applicar un 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 વાપરવુ algo como 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;
}

એ પણ યાદ રાખો લખાણ-સંરેખિત કોઈ એલાઇનર વર્ટિકલમેન્ટ પેરા પેન્સાડો. પેરા લા એલાઇનેશન વર્ટિકલ ડેલ કોન્ટેનિડો ઇનલાઇન અસ્તિત્વમાં વેલોરેસ ડી vertical-align, y para bloques o layouts completos, ફ્લેક્સબોક્સ o ગ્રીડ મારો વિકલ્પ પસંદ છે.

Casos de uso frequentes y ejemplos

ખૂબ જ સામાન્ય ઉપયોગ 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 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. ફંક્શનો મ્યુ bien en webs corporativas o લેન્ડિંગ પૃષ્ઠો ક્યુ બસકેન સિમેટ્રિયા.

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

એન લોસ ફૂટર es રીઢો એલિનિયર ciertos bloques a la derecha para distinguirlos del flujo principal del texto; por ejemplo, datos del autor, enlaces legales o iconos de redes. Ese contraste 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 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 logicos: શરૂઆત, અંત y મેચ-પેરેન્ટ

Con idiomas LTR como el español o el inglés, ડાબી બાજુથી શરૂઆત કરો y અંત અધિકાર સમાન કરો. En textos RTL (árabe, hebreo), શરૂઆત જમણી છે અને અંત ડાબી છે. આ રીતે, તમે સીએસએસ અનુકૂલન આપોઆપ એ લા ડાયરેક્શન ડેલ ટેક્સ્ટ ડુપ્લિકર નિયમ વગર.

/* 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 એલિમેન્ટો વાસ્તવિક દિશા વાય સુ પાદ્રે. Es útil cuando hay mezclas de direcciones y necesitas mantener consistencia sin forzar valores absolutos.

વાજબી: વિચારણાઓ દ કાયદેસરતા

ઉપયોગ કરો ટેક્સ્ટ-એલાઈન: જસ્ટિફાઇ કરો; 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 */
}

અસ્તિત્વમાં છે un matiz de અમલીકરણ: algunos navegadores, ફાયરફોક્સ જેવું, pueden gestionar el espaciado al justificar de forma ligeramente distinta a Chrome o Safari. કોઈ es un error, sino diferencias de motor. Si el justificado es crítico para tu diseño, prueba en varios navegadores.

લખાણ-સંરેખિત-છેલ્લું: નિયંત્રણ લા અલ્ટીમા લાઇન

Cuando justificas o alineas bloques complejos, puede interesarte indicar cómo se alinea la ultima línea ડી અન પેરાફો. અહી એન્ટ્રા text-align-last, શું તમે મૂલ્યો સ્વીકારો છો ઓટો, બાકી, અધિકાર, કેન્દ્ર, સર્મથન, શરૂઆત y અંત. પરમિટ રેફિનાર અલ રિમેટ ડેલ પેરાફો.

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

ડાયરેકશન ડેલ ટેક્સ્ટ y કોમ્બિનેશન કોન યુનિકોડ-બીડી

મિલકત direction વ્યાખ્યાયિત કરે છે લખાણ નિર્દેશિકા dentro de un elemento: LTR અથવા RTL. En combinacion con unicode-bidi તમે કરી શકો છો ફોરઝાર અથવા અનિદાર દિશાનિર્દેશો en textos con últiples idiomas. બહુભાષીઓના ઇન્ટરફેસ માટે વિશેષતા છે o cuando insertas terminos á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 */
}

ભેગું કરો દિશા કોન 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 vertical: vertical-align y alternativas

નો hay que confundir conceptos: ટેક્સ્ટ-સંરેખિત સોલો એલિનિયા અને આડી. ઊભી માટે, CSS ઑફર્સ vertical-align સંદર્ભમાં contenido inline y celdas de tabla. નો સિરવે પેરા સેન્ટ્રર બ્લોક્સ કોમ્પ્લેટોસ, pero sí para ajustar la linea base o colocación vertical relativa.

ના મૂલ્યો vertical-align જેનો તમે ઉપયોગ કરી શકો છો: આધારરેખા (ડિફોલ્ટ), પેટા, સુપર, ટોચ, ટેક્સ્ટ-ટોચ, મધ્ય, નીચે, ટેક્સ્ટ-નીચેઉપરાંત રેખાંશ y ટકાવારી para desplazar respecto a la linea base. Son muy útiles para iconos inline, superíndices o tablas.

આધારરેખા: alinea con la linea base del padre.
પેટા / સુપર: સિમ્યુલન સબઇન્ડાઇસિસ અને સુપરઇન્ડાઇસિસ.
ટોચ / નીચે: se alinean con el elemento más alto/bajo de la Linea.
ટેક્સ્ટ-ટોચ / ટેક્સ્ટ-નીચે: se alinean con la parte alta/baja de la fuente del padre.
મધ્ય: સેન્ટ્રા એપ્રોક્સિમાડામેન્ટે રિસ્પેક્ટો એ લા એક્સ-ઊંચાઈ; útil con iconos.
રેખાંશ/%: ajusta desplazamientos finos.

મધ્યમાં ઊભી રીતે પૂર્ણ બ્લોક્સ, es más efficaz usar ફ્લેક્સબોક્સ 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

લોસ એલિમેન્ટોસ હાઇજોસ સુએલેન વારસદાર ટેક્સ્ટ-એલાઈન ડેલ કન્ટેનેડર. સી એન અન <div> પોન્સ text-align: center;, todos sus párrafos e inline tienden a centrarse 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 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;
}

ડિઝાઈન રિસ્પોન્સિવ અને મીડિયા ક્વેરીઝ

ઇસ રીઢો કેમ્બિયાર 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. કૉન મીડિયા ક્વેરીઝ લો ઓટોમેટિઝ sin ડુપ્લીકર 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 શરૂઆત/અંત en લેઆઉટ 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:

મિલકત	Descripción
દિશા	la dirección de escritura (LTR/RTL) વ્યાખ્યાયિત કરો.
લખાણ-સંરેખિત કરો	Controla la alineació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 lineas y celdas.

Combinarlas bien te permite resolver desde ઇન્ટરફેસ બહુભાષીઓ પૂર્ણ કરે છે hasta detalles tipográficos muy precisos en cards, tablas or componentes reutilizables. પ્લાનિફિક વેલોરેસ પોર ડિફેક્ટો વાય એક્સેપસીયોન્સ કોન કેબેઝા.

શોધખોળની સુસંગતતા

મિલકત લખાણ-સંરેખિત 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 practicamente en todas partes.

ગૂગલ ક્રોમ: 1.0
ઇન્ટરનેટ એક્સપ્લોરર: 3.0
માઇક્રોસ Microsoftફ્ટ એજ: 12.0
ફાયરફોક્સ: 1.0
ઓપેરા: 3.5
સફારી: 1.0

કૃપા કરીને નોંધો કે ન્યાયીકરણના કારણો pueden variar entre Motores (ઉદાહરણ તરીકે, Firefox ક્રોમ/સફારી માટે). Si la aparencia precisa del justificado es crítica, valida 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;
}

અધિકાર: útil para metadatos, firmas, fecha y bloques secundarios. Crea contraste con el contenido principal.

p.derecha {
  text-align: right;
}

સેન્ટ્રાડો: આદર્શ પેરા ટાઇટ્યુલોસ, સીટીએ ઓ બ્લોક્સ બ્રેવ્સ ડોન્ડે સે બસકા ફોકો વિઝ્યુઅલ ઈન્મીડિયાટો. 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 અંત સીએસએસ અલ કેમ્બિયાર અલ રૂઢિપ્રયોગ માટે અનુકૂલનશીલ પાપ. તે અહોરા હોજા ડુપ્લિકાડાસ અને ભૂલો ઘટાડે છે.

જો તમે ઇનલાઇન છો, તો કોઈ જવાબ આપશો નહીં text-align જેમ આશા, મીરા એલ ડિસ્પ્લે ડી સુ કન્ટેન્ડોર. 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. ઉના જેરાર્ક્યુઆ ક્લેરા એવિટા સોબ્રેસ્ક્રીટુરાસ ઇન્નેસેસરિયાસ વાય સ્ટાઇલોસ ફ્રેગિલ્સ.

Limitaciones, rarezas y futuro de la especificación

La especificación contempla ideas como એલિનિયર લા પ્રાઇમરા લાઇનિયા ડિસ્ટિંટો ડેલ રેસ્ટો કમ્પ્યુટર નોટેશન સાથે (શરૂઆતનો અંત), અથવા એલિનિયર પોર ઉના કેડેના (ઉદાહરણ તરીકે, text-align: "." start;) para columnas numéricas con separador decimal. હોય પોર હોય નો ક્યુએન્ટન કોન સોપોર્ટ પ્રેક્ટિકો en los navegadores, pero apuntan a casos de uso reales en tablas y listados.

યાદ રાખો કે ટેક્સ્ટ-સંરેખિત કોઈ રિઝ્યુઅલવે લા એલિનેશન વર્ટિકલ ની એલ સેન્ટ્રાડો ડેલ પ્રોપિયો બ્લોક. પેરા એસો, યુએસએ વર્ટિકલ-ગોઠવણી (en su સંદર્ભો), ફ્લેક્સબોક્સ અથવા ગ્રીડ. અલગ જવાબદારીઓ te ahorra frustraciones y resultados inconsistentes.

રિસ્પેક્ટો a compatibilidad, los valores tradicionales tienen ખૂબ જ સોલિડો સપોર્ટ કરો. એન વાજબી, los motores pueden diferir en el reparto de espacios; માન્ય છે કે તમે બ્રાંડિંગ એક્સિજ હોમોજેનિડેડ એબ્સોલ્યુટા. La experiencia real del usuario manda.

એચટીએમએલ અને સીએસએસના રેપિડાસ ડેમોસ્ટ્રેશન

Uso directo en un titular centrado: એક ઉત્તમ કાર્ય પેરા હીરો હેડિંગ 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: સંકલન ફ્રીક્યુએન્ટે અને આર્ટિક્યુલોસ.

<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 ટેક્સ્ટ-એલાઈન-લાસ્ટ પેરા ડેસ્ટાકાર એલ સિએરે ડેલ પેરાફો: નિયંત્રણ 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 linea (ઉદાહરણ તરીકે, ચિહ્નો અને ટેક્સ્ટ): 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 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; }

જો તમે એ રેક de tarjetas, céntralas a nivel de contenido con text-align y deja al system de layout (Grid/Flex) el reparto espacial. અલગ જવાબદારીઓ વાય એવિટા વિરોધાભાસ.

.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 centrar 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 faciles de mantener.