属性 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 决定了横向内容的排列和元素内容的排列，是组织标题、标题、菜单或美洲驼的一个动作，内容连贯且清晰。

经典选项包括左、右、中和对齐，并根据文本方向调整逻辑值，从开始、结束到有趣的匹配父项。方便国际化 (LTR/RTL) 的各种变体和 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 end.

基本原则和可支配价值

使用的格式非常直接：使用线性的内容选择器来选择内容。一般性的原则和习惯性的价值：

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

经典的值是在 cualquier proyecto 中：左(alineación a la izquierda)、右(a la derecha)、中(centrado) 和对齐(márgenes alineados repartiendo espacio entre palabras)。Son los más Extendidos y ampliamente soportados por los navegadores。

Además，CSS incorpora valores lógicos y de herencia muy útiles：从开始到结束都适应LTR/RTL，因为它是最重要的；匹配父计算 la alineación en función de la dirección del elementoactual y su padre；继承fuerza la Herencia del Valor del padre；最初的恢复是预先确定的。这有助于国际化和管理。

也有 特殊要求的配合 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.

频繁使用和实例的情况

我们必须与所有部分的连接和配置一起使用。例如，以视觉上的名义为核心，以合理的方式将所有的内容都放在正确的位置上，包括评论和周期。必须遵守内容和合法性。

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

En una barra de navegación puedes optar por un centrado si quieres una estética equalibrada yvisen en pantallas grandes。可以使用公司网站或公共主页登录页面功能。

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

在页面中，我们习惯性地以线性方式排列文本；例如，作者的数据包含法律或图标。Ese 对比 ayuda 和单独的 jerarquías 视觉效果。

footer .meta {
  text-align: right;
}

骆驼以行动(CTA) 为中心，可快速移动并方便地点击。将 llamativo 与文本中心组合在一起，以创建 bloque que capte la atención。El Centrado refuerza la jerarquía del CTA。

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

Valores lógicos：开始、结束和匹配父项

在西班牙语或英语中，LTR 的惯用语是start equale a left y end equale a right。在 RTL 文本（阿拉伯语、希伯来语）中，从右开始，从左结束。在这种情况下， CSS 会自动适应重复文本的方向。

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

.card__meta {
  text-align: end;
}

勇气匹配父项类似于继承，但计算结果是实际元素和父项的方向函数。这是绝对价值的前提和必要条件。

合理性：考虑合法性

Usar text-align：对齐； Crea Márgenes 直接与 ambos lados repartiendo entre palabras 空间。Queda muy“社论”，但要方便地在 medida de línea 和 el interletrado para evitar“ríos”视觉效果中，在专栏中进行所有操作。

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

存在一个实现方式：与 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 end. 允许重新装修 el remate del parrafo.

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

El valor auto suele justificar y a la izquierda en contextos LTR, mientras que start y end respetan la dirección del texto. Es una forma fina de controlar ritmo del parrafo sin romper la estética General。

unicode-bidi 的文本和组合方向

物业 direction 定义 写作指导 元素之间的关系：LTR 或 RTL。 En 组合 con 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 罗布斯塔 frente a cambios de idioma。

Alineación Vertical：垂直对齐和替代

没有什么混淆的概念： 文本对齐 单独 alinea 水平. 段落垂直，CSS 提供 vertical-align 在这样的背景下 连续内联和塔布拉琴弦. 没有 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 高度中心近似值；直到图标。
  • 经度/%：调整最终结果。

垂直方向的完整中心，主要是使用Flexbox或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 start/end en Layouts RTL/LTR sin tocar el CSS cuando cambie el idioma.美国的逻辑价值可以在海上减少损失。

相关关系表

您可以按照文本的排列和方向进行操作。Repasarlas juntas ayuda 构建系统：

Propiedad 描述
方向 定义 escritura 方向 (LTR/RTL)。
文本对齐 控制水平线和内线线。
文本最后对齐 Alinea específicamente la ultima linea de un parrafo。
Unicode-bidi 管理 cómo se anidan 和 resuelven direcciones de texto mezcladas。
垂直对齐 调整垂直直线和直线。

结合使用多种语言的解析器，可以详细了解卡片、表格或可重复使用的组件。Planifica valores por defeto y excepciones con cabeza。

浏览器兼容性

文本对齐功能可以帮助您在现代导航中对初始版本进行大量放大，以便在生产项目中使用平静的功能。经典操作问题与各方实践中的问题有关。

  • 谷歌Chrome浏览器： 1.0
  • Internet Explorer: 3.0
  • Microsoft Edge： 12.0
  • Firefox: 1.0
  • 歌剧： 3.5
  • Safari: 1.0

十个在汽车中的合理性提示（例如，Firefox 和 Chrome/Safari）。如果您了解批评的正确性，并在客观观察中验证视觉结果。

传统价值的快速发展

Izquierda (por defeto en LTR): alineación natural para la mayoría de idiomas occidentales .直到演讲者和赞助人 de escaneo previsibles。

p.izquierda {
  text-align: left;
}

Derecha：util para metadatos、firmas、 fecha y bloques secundarios。创建对比主要内容。

p.derecha {
  text-align: right;
}

中心：理想的标题，CTA 或 bloques breves donde sebusca foco 视觉媒介。 Evítalo en parrafos largos por legibilidad。

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

理由：右边界的专栏社论。结合参与整个过程。

.columna {
  text-align: justify;
}

良好做法和建议

不得在专栏中滥用正当理由，不得滥用一般空间的不规则行为。合法性优先。调整线路和可能的情况，自动操作。

多语言的模型，优先考虑从头到尾适应CSS的习惯用法。避免重复并减少错误。

Si un inline no responde a text-align como esperas, 内容显示。很多问题都解决了 aplicando la propiedad en el bloque padre o 显示元素。

在各种组件的组成部分中，文献记录了“基础”的设置，并且允许例外。Una jerarquía clara evita sobrescrituras innecesarias y estilos fragiles.

特殊规格的限制、罕见和未来

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，美国垂直对齐（en su contexto），Flexbox o Grid。单独的责任会导致挫折和结果不一致。

尊重兼容性、传统价值和支持力。 En justificado , los motores pueden differir en el reparto de espacios; valida si tu 品牌绝对同质化。真正的体验。

HTML 和 CSS 快速演示

我们直接在一个标题中心：一个经典的英雄标题和热潮的功能。

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

应用text-align-last 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 适应 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>

需要垂直对齐（例如，图标和文本）：垂直对齐。

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

在文章列表的场景中，以线性方式描述了逻辑元数据和标题。视觉效果与文本方向相适应。

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

最后，如果身体因叛逃而进行调整，请对具体组件进行调整和调整。十个 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; }

与文本对齐相关的实际内容是内联内容，可以根据习惯和设置进行组合，并与文本对齐最后、方向和垂直对齐相关的属性进行组合。Con estas pautas, lograrás resultados 一致的, 易读的和容易的。

相关文章：