সিএসএস টেক্সট-সারিবদ্ধকরণের প্রস্তাব: guía completa con ejemplos y soporte

হোম » পাইথন » সিএসএস টেক্সট-সারিবদ্ধকরণের প্রস্তাব: 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 নির্ধারন la alineación horizontal del contenido en linea 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 অনুভূমিক del contenido en linea que vive dentro de un elemento de bloque (o elementos con comportamiento similar)। কোন কেন্দ্র নেই ডেসপ্লাজা এল প্রোপিও ব্লক (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 inline or inline-block dentro de ese contenedor: enlaces, iconos inline, imagenes con display: inline, অনুরূপ উপাদানগুলির y. A su vez, los descendientes pueden Heredar est 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 logicos como শুরু y শেষ.

সিনট্যাক্সিস বেসিকা এবং ভ্যালোর ডিসপোনিবল

লা ফর্মা ডি ইউসো এস মুয় ডিরেক্ট: aplica el valor deseado al নির্বাচক 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 logicos y de Herencia muy utiles: শুরু y শেষ LTR/RTL sin que tengas que cambiar estilos sin adaptan; মিল-পিতামাতা calcula la alineación en función de la dirección del elemento বাস্তব y su padre; উত্তরাধিকারী ফুয়ের্জা লা হেরেন্সিয়া দেল বীরত্ব দেল পাদ্রে; e প্রারম্ভিক restablece el valor al predeterminado del estándar. estos valores facilitan la Internacionalización y el mantenimiento.

এছাড়াও বিদ্যমান comportamiento especificado pero aun sin soporte en los navegadores según la especificación: por ejemplo, combinar শুরু শেষ প্যারা অ্যালিনিয়ার লা প্রাইমার লাইন ডি আন মোডো ই এল রেস্টো ডি ওট্রো, ও অ্যালিনিয়ার পোর উনা ক্যাডেনা কোন ধরণের সিনট্যাক্সিস আছে? text-align: "." start; para, por ejemplo, alinear números por el separador decimal. ছেলের ধারনা ইন্টারেস্ট্যান্টস এবং কোন বাস্তবায়ন না করা প্রস্তুতিতে.

Cómo se aplica sobre distintos tipos de elementos

টেক্সট-সারিবদ্ধ অ্যাক্টুয়া তাই কনটেনিডো ইনলাইন 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 (Por ejemplo, margin: 0 auto; con un ancho definido) o usar sistemas delayout 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;
}

এটাও মনে রাখবেন টেক্সট-সারিবদ্ধ কোন está pensado para alinear verticalmente. প্যারা লা alineación উল্লম্ব দেল contenido ইনলাইন অস্তিত্ব valores ডি 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, centrar un titular puede dar más énfasis visual, mientras que un párrafo justificado aporta un acabado con margenes 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 pantallas grandes দৃশ্যমান। ল্যান্ডিং পৃষ্ঠাগুলিতে কাজ করতে পারেন que buscan simetría. এর বিবরণ

.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 আসল দিকনির্দেশনা y su padre. [অনলাইন]. Es útil cuando hay mezclas de direcciones y necesitas mantener consistencia sin forzar valores absolutos.

ন্যায্যতা: বৈধতা বিবেচনা করা

ব্যবহার টেক্সট-সারিবদ্ধ: জাস্টিফাই; crea margenes 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 */
}

বিদ্যমান ইউন ম্যাটিজ ডি বাস্তবায়ন: অ্যালগুনোস নেভেগাডোরস, ফায়ারফক্সের মতো, pueden gestionar el espaciado al justificar de forma ligeramente distinta a Chrome o Safari. কোন ত্রুটি নেই, মোটর ডিফারেন্সিয়াস. 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 linea ডি আন প্যারাফো। আহি এন্ট্রা text-align-last, que valores como স্বীকার করে গাড়ী, বাম, অধিকার, কেন্দ্র, ন্যায্যতা প্রতিপাদন করা, শুরু 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 estetica General.

ইউনিকোড-বিডির সংমিশ্রণে নির্দেশিকা

সম্পত্তি direction সংজ্ঞায়িত লেখার নির্দেশনা dentro de un elemento: LTR বা RTL. এন সমন্বয় কন unicode-bidi আপনি করতে পারেন ফরজার বা অনিদার নির্দেশিকা en textos con ultiples 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 উল্লম্ব: উল্লম্ব-সারিবদ্ধ এবং বিকল্প

কোন ধারণা নেই: টেক্সট-সারিবদ্ধ একক অ্যালাইনিয়া এবং অনুভূমিক. উল্লম্বভাবে, CSS অফারগুলির জন্য vertical-align এর প্রেক্ষাপটে কনটেনিডো ইনলাইন ওয়াই সেলডাস ডি তবলা. No sirve para centrar bloques completos, pero sí para ajustar la linea base o colocación vertical relativa.

এর মান vertical-align যা আপনি ব্যবহার করতে পারেন: বেসলাইন (ডিফল্ট), উপ, সুপার, শীর্ষ, টেক্সট-টপ, মধ্যম, পাদ, টেক্সট-নীচে, ছাড়াও দ্রাঘিমাংশ y শতকরা প্যারা desplazar respecto a la linea base. Son muy útiles para iconos inline, superíndices o tablas.

• বেসলাইন: alinea con la Linea base del padre.
• উপ / সুপার: simulan subindices y superindices.
• শীর্ষ / পাদ: se alinean con el elemento más alto/bajo de la Linea.
• টেক্সট-টপ / টেক্সট-নীচে: se alinean con la parte alta/baja de la Fuente del padre.
• মধ্যম: কেন্দ্র aproximadamente সম্মান একটি লা x-উচ্চতা; útil con iconos.
• দ্রাঘিমাংশ/%: ajusta desplazamientos finos.

উল্লম্বভাবে কেন্দ্রীভূত সম্পূর্ণ ব্লক, es más eficaz usar flexbox 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 */
}

বিরূদ্ধে কম্বিনডোরস এবং সিলেক্টোরস ডি মেয়র স্পেসিফিকিডাড puedes ajustar alineaciones en nodos concretos: por ejemplo, alinear a la derecha solo los últimos elementos de una lista dentro de un bloque centrado. সঠিক নির্বাচনের সমন্বয়ে নিয়ন্ত্রণ করা হয়েছে.

.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। এইচটিএমএল ডুপ্লিকার পাপ স্বয়ংক্রিয়ভাবে মিডিয়া প্রশ্নগুলি.

.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 logicos siempre que সমুদ্র সম্ভব রক্ষণাবেক্ষণ কমাতে।

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)।
টেক্সট প্রান্তিককরণ	কন্ট্রোলা la alineación অনুভূমিক ডেল কনটেনিডো ইনলাইন।
টেক্সট-অ্যালাইন-লাস্ট	Alinea específicamente la ultima linea de un párrafo.
ইউনিকোড-বিডি	Gestiona cómo se anidan y resuelven direcciones de texto mezcladas.
উল্লম্ব প্রান্তিককরণ	Ajusta la alineación উলম্ব en lineas y celdas.

Combinarlas bien te permite solver desde ইন্টারফেস বহুভাষিক কমপ্লিজ কার্ড, ট্যাবলা বা উপাদান পুনঃব্যবহারযোগ্য। প্লানিফিকা ভ্যালোরস 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. লস ভ্যালোরস ক্লাসিকোস অপেরান পাপ সমস্যাগুলি ব্যবহারিকভাবে টোডাস পার্টিস.

• গুগল ক্রম: 1.0
• ইন্টারনেট এক্সপ্লোরার: 3.0
• মাইক্রোসফ্ট এজ: 12.0
• ফায়ারফক্স: 1.0
• অপেরা: 3.5
• সাফারি: 1.0

মনে রাখবেন যে যুক্তিসঙ্গত কারণ মোটর পরিবর্তন করতে হবে (যেমন, ফায়ারফক্স ক্রোম/সাফারির জন্য)। Si la aparencia precisa del justificado es crítica, ভ্যালিডা এল ফলাফলের ভিজ্যুয়াল এবং লস নেভিগডোরস অবজেটিভো।

ইজেমপ্লোস রেপিডোস ডি ভ্যালোরস ট্রেডিকোনালেস

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. ক্রিয়ে কনট্রাস্ট কন এল কনটেনিডো প্রিন্সিপাল।

p.derecha {
  text-align: right;
}

কেন্দ্রীভূত: আদর্শ প্যারা টিটুলস, CTA ও bloques breves 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. কম্বিনাল কন পার্টিসিয়ন ডি প্যালাব্রাস কুয়ান্ডো প্রক্রিয়া।

.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 আশা করি, মিরা এল ডিসপ্লে ডি সু প্রতিযোগী. অনেক সমস্যার সমাধান করতে হবে aplicando la propiedad en el bloque padre o cambiando el display del elemento.

এন কম্পোনেন্টস কমপ্লেজোস কন ভ্যারিয়াস ক্যাপাস, ডকুমেন্ট dónde se establece la alineación "বেস" y dónde se permiten excepciones. Una jerarquía clara evita sobrescrituras innecesarias y স্টাইলস ফ্রাগিলস।

সীমাবদ্ধতা, rarezas y futuro de la especificación

La especificación contempla idea como অ্যালিনিয়ার লা প্রাইমার লাইন ডিস্টিনটো ডেল রেস্টো কম্পিউটেশনের নোটেশনের সাথে (শুরু শেষ), বা অ্যালিনিয়ার পোর উনা ক্যাডেনা (উদাহরণস্বরূপ, text-align: "." start;) para columnas numericas 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 উল্লম্ব ni el centrado del propio bloque. প্যারা এসো, মার্কিন যুক্তরাষ্ট্র উল্লম্ব প্রান্তিককরণ (en su contexto), ফ্লেক্সবক্স বা গ্রিড। পৃথক দায়িত্ব te ahorra frustrationes y resultados inconsistentes.

একটি সামঞ্জস্যপূর্ণ সম্মান, los valores tradicionales tienen সাপোর্টে মুই সোলিডো. ঐন্ সমর্থনযোগ্য, los motores pueden diferir en el reparto de espacios; আপনি ব্র্যান্ডিং এক্সিজ হোমোজেনিডেড অ্যাবলুটা বৈধ। 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: কম্বিনেশন ফ্রিকুয়েন্টে এবং আর্টিকুলস.

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

প্রয়োগ করা টেক্সট-অ্যালাইন-লাস্ট প্যারা ডেস্টাকার এল সিয়েরে দেল প্যারাফো: নিয়ন্ত্রণ ফিনো 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 (উদাহরণস্বরূপ, আইকন এবং টেক্সট): উল্লম্ব-সারিবদ্ধ তে সাকা দেল আপুরো.

<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 ডেজা আল সিস্টেম ডি লেআউট (গ্রিড/ফ্লেক্স) এস্পেসিয়াল রিপার্টো। পৃথক দায়বদ্ধতা এবং 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 কংক্রিট উপাদান এবং অন্যান্য বৈশিষ্ট্য. 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.