屬性 CSS 文字對齊： guía completa con ejemplos y soporte

最後更新： 11/13/2025
作者： C 源追蹤
  • 文字對齊水平線內聯：左，右，居中，對齊，開始，結束和匹配父級。
  • Valores lógicos（開始/結束）適應 LTR/RTL； text-align-last afina la última linea。
  • 相容性非常好；在 Firefox 和 Chrome 中，您可以使用不同的驅動程式。

使用 CSS 進行文字排版

與網路製作相關的操作，可以透過基本的區塊來控製文字的分發，並且可以在屬性中進行控制 文本對齊. CSS 決定水平方向的排列和元素排列的方向，是組織名稱、標題、菜單或駱駝的行動，內容連貫且清晰。

經典選項的進階選項 左側的, 右側, 中央 y 辯解, hoy en día contamos con valores lógicos que se adjustment 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。

這就是文字對齊和它的作用

物業 text-align 指定 水平線連接 que vive dentro de un elemento de bloque（類似的元素）。 沒有中心廣場 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。

En la práctica, si aplicas text-align 一個聯合國 <div> 或到 <section>, afecta al texto ya todo lo que sea inline 或 inline-block 主題內容：繫帶、內嵌圖示、影像組合 display: inline, 和類似元素。就這樣，後裔們有勇氣，有必要，在尼韋萊斯下級有能力。

Un detalle importante es que, en la mayoría de idiomas que se escriben de izquierda a derecha (LTR), el valor por defeto de text-align es 左側的. Cando el documento el contenedor está en derecha a izquierda (RTL), cambia 與 alineación 自然 pasa a ser 的配合 右側。 Por eso es útil conocer los valores lógicos como 開始 y 結束.

基本原則和可支配價值

La forma de uso es muy directa： 應用勇敢的選擇和競爭者的選擇 que engloba el contenido 是一個線性的。一般性原則與習慣性價值：

/* Sintaxis general */
selector {
  text-align: left | right | center | justify | start | end | match-parent | initial | inherit;
}

實際項目中的經典價值： 左側的 (alineación a la izquierda), 右側 （向右） 中央 （centrado）y 辯解 （márgenes alineados repartiendo espacio entre palabras）。 Son los más extendidos ampliamente soportados por los navegadores.

Además，CSS 的邏輯價值與實用性： 開始 y 結束 適應LTR/RTL sin que tengas que cambiar estilos; 匹配父級 計算實際元素和實際元素的方向函數； 繼承 教父勇猛力量； e initial 恢復既定的勇氣。 促進國際化和管理的價值.

也有 特殊要求的配合 en los navegadores según la especación: por ejemplo, 組合 開始 結束 平行的第一條線 de un modo y el Resto de otro, o alinear por una cadena con una sintaxis del tipo text-align: "." start; 例如，十進制的線性數字。 兒子的想法很有趣，但沒有實施 在實踐中。

與元素技巧不同的應用程式

文字對齊 行內內容 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 必要的其他技術（例如， margin: 0 auto; con un ancho definido) o usar 現代佈局系統如 Flexbox o Grid。

你是一個元素 嚴格內聯 （作為一個 <span>) y quieres aplicar un text-align 特別是，請參閱內聯 aislado 的“directamente”應用程式； 最好在集體衝突中採取行動或 內嵌式Conviertes en bloque 使用 algo como display: block Para que pueda alinese 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 佈局​​完成， Flexbox的 o 格 son la opción preferente.

頻繁使用和實例的情況

Un uso muy común es la 附件和保護的排列 de una sección。例如，以視覺上的名義為核心，以合理的方式將所有的內容放在正確的位置上，並進行回顧和週期。 內容和合法性的內容.

h1 {
  text-align: center;
}
.articulo p {
  text-align: justify;
}

在一個 導航欄 puedes optar por un centrado si quieres una estética equalibrada yvisen en pantallas grandes。 企業網站或登陸頁面的功能 que buscan simetría.

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

在 註腳 這是習慣性的線性 ciertos bloques a la derecha para distinguirlos del Flujo 的主要文本；例如，作者的數據包含法律或圖標。 Ese 比較 ayuda 與單獨的 jerarquías 視覺效果.

footer .meta {
  text-align: right;
}

En 號召行動 (CTA) centradas、el mensaje destaca rápidamente 和 facilita el clic en mobile。將 llamativo 與文本中心組合在一起，以創建一個 bloque que capte la atención。 CTA 的中央避難所.

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

Valores lógicos：開始、結束和匹配父項

Con idiomas LTR como el español or el inglés, 起始等效於左側 y 結束等價於右。 En textos RTL（arabe、hebreo）， 起始於右側，結束於左側。 這樣， CSS 自動適應文字方向 sin duplicar reglas.

/* 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 util cuando hay mezclas de direcciones 必須保持絕對價值的一致性。

合理性：考慮合法性

使用 文字對齊：兩端對齊； Crea Márgenes 直接與 ambos lados repartiendo entre palabras 空間。 Queda muy “editorial”, pero conviene cuidar la medida de línea y el interletrado para evitar “ríos” 視覺效果, sobre todo en Columnas estrechas.

.cuerpo-texto {
  text-align: justify;
  hyphens: auto; /* para mejorar saltos de línea en idiomas compatibles */
}

存在實施方法：algunos navegadores， como Firefox，請注意與 Chrome 或 Safari 不同的格式。 無錯誤，電機中國差異。這是對你的設計的合理批評，也是對各種導航者的批評。

text-align-last：控制最後一行

合理的或共同的、共同的、相互的 Cómo se alinea la última linea de un párrafo. Ahí entra text-align-last, que admite valores como 汽車, 左側的, 右側, 中央, 辯解, 開始 y 結束. 允許重新裝修 el remate del parrafo.

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

價值 汽車 Suele justificar y a Linear a la izquierda en contextos LTR, mientras que 開始 y 結束 回覆文字方向。 Es una forma fina de controlar el ritmo del parrafo 一般罪孽。

unicode-bidi 的文字和組合方向

物業 direction 定義 寫作指導 元素之間的關係：LTR 或 RTL。 En 組合 unicode-bidi 你可以 forzar o anidar direcciones 包含多種慣用語的文字。 特別是多語言介面 您可以在西班牙語中插入阿拉伯語終點站。

.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 */
}

結合 方向 同 文字對齊的邏輯價值 條件和替代方案。 La maquetación se vuelve más robusta frente cambios de idioma.

Alineación Vertical：垂直對齊和替代

沒有什麼混淆的概念： 文字對齊 單獨 alinea 水平. 段落垂直，CSS 提供 vertical-align en el contexto de 連續內聯和塔布拉琴弦. 沒有 sirve para centrar bloques completos，但可以調整底座線或垂直相對位置。

的價值 vertical-align 您可以使用： 底線 (預設), 分, 偉大, 最佳, 文字頂部, 中間, 底部, 文字底部除了 經度和百分比 para desplazardrespecto a la linea base。 Son muy útiles para icono 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 laparte alta/baja de la fuente del padre。
  • 中間：x 高度中心近似值；直到圖示。
  • 經度/%：調整最終結果。

Para centrar verticalmente 完整的區塊，es más eficaz usar Flexbox的 o CSS網格. 佈局佈局和解決方案的子系統 在任何視窗中。

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

埃倫西亞，alcance y cómo sobrescribir

Los elementos hijos suelen heredar 文字對齊 del contenedor. Si en un <div> 小馬 text-align: center;，所有事項均在中心位置內嵌。 Para romper esa herencia，在 el elemento hijo 中建立起獨特的勇氣。

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

同 具體市長組合和選擇者 調整具體的排列順序：例如，將所有元素排列成線性的整體。 控制最終結果組合選擇器校正.

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

回應媒體查詢

習慣性改變 潘塔拉錨船的航線：以方便講座和帽子為中心，以傳統風格的書寫方式排列。 避免重複 HTML 的媒體查詢自動化.

.cabecera {
  text-align: center;
}
@media (min-width: 768px) {
  .cabecera {
    text-align: left;
  }
}

También puedes centrar títulos y botones en vistas pequeñas y colocarlos a 開始/結束 en 佈局 RTL/LTR sin tocar el CSS cuando cambie el idioma。 美國在海上可能的價值邏輯 以減少維護。

相關關係表

您可以按照文字的排列和方向進行操作。 Repasarlas juntas ayuda 建造系統:

屬性 描述
方向 定義 escritura 方向 (LTR/RTL)。
文本對齊 控制水平線和內線線。
文字最後對齊 Alinea específicamente la ultima linea de un parrafo。
Unicode-bidi 管理 cómo se anidan 和 resuelven direcciones de texto mezcladas。
垂直對齊 調整垂直直線和直線。

組合許可解析器 多語言綜合介面 詳細介紹了卡片、塔布拉斯或可重複使用的組件。 缺陷和例外情況的平面.

瀏覽器相容性

物業 文字對齊 Cuenta con soporte muy amplio 現代導航器的初始版本，是為了讓我們在生產項目中保持平靜。 各方面實踐中的經典操作問題.

  • 谷歌Chrome瀏覽器： 1.0
  • Internet Explorer： 3.0
  • Microsoft Edge： 12.0
  • 火狐： 1.0
  • 歌劇： 3.5
  • 蘋果瀏覽器： 1.0

請記住 los matices de justificado pueden variar entre motores（例如，Firefox 和 Chrome/Safari）。 正確與批判的正確認識，驗證客觀觀察結果的視覺效果。

傳統價值的快速發展

Izquierda（LTR 叛逃）： 西方語言市長的自然行動。直到演講者和贊助人 de escaneo previsibles。

p.izquierda {
  text-align: left;
}

正確的： 直到元資料、韌體、fecha 和 bloques secundarios。創建對比主要內容。

p.derecha {
  text-align: right;
}

Centrado： 理想的標題，CTA o bloques breves Donde se Busca foco 視覺媒介。 Evítalo en parrafos largos por legibilidad。

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

合理的： 右邊界的專欄評論。結合參與整個過程。

.columna {
  text-align: justify;
}

良好做法和建議

No abuses del justificado en columnas muy estrechas， porque puede 一般 espacios 不規則。 La legibilidad es priority。調整線路和可能的情況，自動操作。

Cuando maquetes en entornos 多種語言，優先考慮 開始 y 結束 適應 CSS 的習慣。 Te ahorra hojas duplicadas 並減少錯誤。

Si un inline no responde a text-align como esperas, 內容顯示。很多問題都解決了 aplicando la propiedad en el bloque padre o 顯示元素。

包含各種內容的完整組件、文獻展 dónde se establece la alineación “基地” y dónde se 允許例外。 Una jerarquía clara evita sobrescrituras innecesarias y estilos frágiles.

特殊規格的限制、罕見和未來

La especacion contempla ideas como 線性拉第一線區別於恢復 con una notación compuesta (開始 結束），或 alinear por una cadena （例如， text-align: "." start;) 與分隔符號十進制的數字列。 Hoy por hoy no centan con soporte practico 在 los navegadores 中，pero apuntan a casos de uso reales en tablas y listados。

記住 文字對齊不會導致垂直對齊. Para eso, usa 垂直對齊 （en su contexto），Flexbox o Grid。 分離責任 令人沮喪和結果不一致。

尊重傳統的相容性 soporte muy sólido。 在 有道理的, los motores pueden differir en el reparto de espacios; valida si tu 品牌絕對同質化。 真實體驗.

HTML 和 CSS 快速演示

直接使用名義上的中心： un clásico que funciona 英雄標題和破壞者團體。

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

內嵌內容和合理內容的內容： 頻繁地與文章組合.

<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: 控制菲諾·辛·託卡爾·埃爾·孔泰尼多.

<p class="cierre">La última línea quedará centrada, resaltando el final.</p>
<style>
  .cierre {
    text-align: justify;
    text-align-last: center;
  }
</style>

Ejemplo con valores lógicos 開始/結束 que se adaptan a LTR/RTL: ideal para productos globales.

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

如果你需要 垂直直線運動 （例如，圖示和文字）： 垂直對齊 te saca del apuro.

<span class="icono">★</span> <span class="label">Favorito</span>
<style>
  .icono { vertical-align: middle; }
  .label { vertical-align: middle; }
</style>

在文章清單的場景中，以線性方式描述了邏輯元資料和標題。 La jerarquía 視覺 queda clara 您可以根據文字方向進行調整。

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

如果您使用 架子 de tarjetas, centralas a nivel de contenido con text-align y deja al sistema 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 defeto, puedes aplicarlo al nivel raíz y 調整具體組成部分的例外情況。十個 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; }

La clave con 文本對齊 es entender que actúa sobre el contenido inline del contenedor, elegir el valor adecuado para el idioma el dispositivo, y Combinarlo con propiedades afines como 文字最後對齊, 方向 y 垂直對齊 cuando la situación lo requiera. Con estas pautas, lograrás resultados 一致的, 易讀的和易於管理的.

相關文章：