CSS मजकूर-संरेखित: valores, usos, RTL आणि ejemplos prácticos

होम पेज » python ला » CSS मजकूर-संरेखित करण्यासाठी प्रॉपिडेड: guía completa con ejemplos y soporte

मजकूर-संरेखित करा alinea horizontalmente el contenido inline: डावीकडे, उजवीकडे, मध्यभागी, न्याय्य, प्रारंभ, समाप्ती आणि जुळणी-पालक.
Valores logicos (प्रारंभ/समाप्त) एलटीआर/आरटीएलसाठी अनुकूल आहे; मजकूर-संरेखित-अंतिम afina la última línea.
कॉम्पॅटिबिलिडाड म्यू एम्प्लिया; फायरफॉक्स आणि क्रोमसाठी योग्य पर्याय आहेत.

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 text-align. 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 सुवाच्य.

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 समान). नो सेंट्रा नी डेसप्लाझा एल प्रोपियो ब्लॉक (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 इंटीरियर.

व्यावहारिकदृष्ट्या, जर तुम्ही अर्ज केला तर text-align एक आहे <div> किंवा एक <section>, afecta al texto ya todo lo que sea इनलाइन किंवा इनलाइन-ब्लॉक 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 शेवट.

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: बाकी (अ‍ॅलिनेसिओन अ ला इझक्विअरडा), योग्य (अ ला डेरेचा), केंद्र (सेंट्राडो) 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 वास्तविक y su padre; वारसा fuerza la herencia del valor del padre; e प्रारंभिक 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, alinear números por el separador decimal. पुत्र कल्पना स्वारस्य आणि अंमलबजावणी नाही सरावात.

Cómo se aplica sobre distintos tipos de elementos

मजकूर-संरेखित करा actúa sobre el contenido inline del contenedor (टेक्स्टो, इनलाइन-ब्लॉक्स, इमेजेस इनलाइन, इ.). 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>) आणि कसे वापरावे 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 इनलाइन 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;
}

हे देखील लक्षात ठेवा मजकूर-संरेखित नाही está pensado para alinear verticalmente. Para la alineación vertical del contenido inline existen valores de vertical-align, y para bloques o layouts completos, फ्लेक्सबॉक्स o ग्रिड तुमचा पर्याय पसंतीचा आहे.

Casos de uso frecuentes 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. वेब कॉर्पोरेटिव्हज किंवा लँडिंग पृष्ठे फंक्शन करा क्यू बसकॅन सिमेट्रिया.

.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 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: प्रारंभ, समाप्ती आणि जुळणारे पालक

Con idiomas LTR como el español o el inglés, डावीकडे बरोबरीने सुरुवात करा y शेवटी हक्काच्या बरोबरीचा करा. En textos RTL (árabe, hebreo), सुरुवात उजवीकडे आणि शेवट डावीकडे. या मार्गाने, आपण 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 dirección del elemento real y su padre. [ऑनलाइन]. 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 implementación: algunos navegadores, फायरफॉक्स प्रमाणे, pueden gestionar el espaciado al justificar de forma ligeramente distinta a Chrome o Safari. नो es अन एरर, sino diferencias de motor. Si el justificado es crítico para tu diseño, prueba en varios navegadores.

मजकूर-संरेखित-अंतिम: नियंत्रणा la ultima línea

Cuando justificas o alineas bloques complejos, puede interesarte indicar cómo se alinea la ultima 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.

डायरेकसीओन डेल टेक्स्टो 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 संकल्पना: मजकूर-संरेखित सोलो ॲलाइना इं क्षैतिज. उभ्या साठी, CSS ऑफर vertical-align संदर्भात contenido इनलाइन y celdas de तबला. नो सिरवे पॅरा सेंट्रर ब्लॉक्स कॉम्प्लेटोस, pero sí para ajustar la línea 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 línea base del padre.
उप / सुपर: simulan subindices y superindices.
अव्वल / तळ: 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-hight; útil con iconos.
रेखांश/%: ajusta desplazamientos finos.

उभ्या मध्यभागी पूर्ण ब्लॉक्स, वापरण्यासाठी अधिक प्रभावी आहे फ्लेक्सबॉक्स o सीएसएस ग्रिड. 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 महापौर 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. HTML डुप्लीकर sin sin automatizas sin media queries.

.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 देखभाल कमी करण्यासाठी.

तबला डी 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) परिभाषित करा.
text-align	Controla la alineación horizontal del contenido inline.
मजकूर-संरेखित-अंतिम	Alinea específicamente la última línea 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 इंटरफेस बहुभाषिक complejas hasta detalles tipográficos muy precisos en cards, tablas or componentes reutilizables. Planifica valores por defecto y excepciones con cabeza.

नौवहन क्षमतांची सुसंगतता

मालमत्ता मजकूर-संरेखित 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
मायक्रोसॉफ्ट काठ: 12.0
फायरफॉक्स: 1.0
ऑपेरा: 3.5
सफारीः 1.0

कृपया लक्षात घ्या योग्यतेचे नियम pueden variar entre motores (उदाहरणार्थ, फायरफॉक्स क्रोम/सफारी साठी). 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;
}

सेंट्राडो: आदर्श पॅरा टिट्युलोस, सीटीए ओ ब्लॉक्स ब्रीव्ह्स donde se busca foco visual inmediato. Evítalo en párrafos largos por legibilidad.

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

न्याय्य: estética de columna संपादकीय 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 al cambiar el idioma साठी sin tocar adaptarte sin tocar. ते अहोर्रा होजस डुप्लिकाडास आणि चुका कमी करते.

जर तुम्ही इनलाइन असाल तर प्रतिसाद देत नाही. 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. 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;) para columnas numéricas con separador decimal. Hoy por hoy no cuentan con soporte practico en los navegadores, pero apuntan a casos de uso reales en tablas y listados.

लक्षात ठेवा की मजकूर-संरेखित नाही resuelve la alineación vertical ni el centrado del propio bloque. पॅरा एसो, अमेरिका अनुलंब-संरेखन (en su संदर्भ), फ्लेक्सबॉक्स किंवा ग्रिड. विभक्त जबाबदारी te ahorra frustraciones y resultados inconsistentes.

रिस्पेक्टो 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.

एचटीएमएल आणि सीएसएसचे प्रदर्शन

युसो डायरेक्टो एन अन टायट्युलर सेंट्रॅडो: एक क्लासिक जो कार्य करतो पॅरा हिरो हेडिंग्स 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: combinacion 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 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 sistema de लेआउट (Grid/Flex) el reparto espacial. वेगळे उत्तरदायित्व आणि evita विरोधाभास.

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

ला क्लेव्ह कॉन 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 मजकूर-संरेखित-अंतिम, दिशा y अनुलंब-संरेखन cuando la situación lo requiera. Con estas pautas, lograrás resultados consistentes, legibles y faciles de mantener.

होम पेज » python ला » CSS मजकूर-संरेखित करण्यासाठी प्रॉपिडेड: guía completa con ejemplos y soporte