文本对齐与行高控制

文本对齐与行高控制

文本对齐和行高是CSS中控制文本布局的两个核心属性。合理的对齐方式和行高设置能显著提升页面的可读性和视觉舒适度。text-align属性控制文本的水平对齐方式，而line-height则决定行与行之间的垂直间距。

文本对齐方式

text-align属性支持四种主要对齐方式：

.left-align {
  text-align: left; /* 左对齐（默认值） */
}

.center-align {
  text-align: center; /* 居中对齐 */
}

.right-align {
  text-align: right; /* 右对齐 */
}

.justify-align {
  text-align: justify; /* 两端对齐 */
}

两端对齐(justify)会产生特殊效果，它会自动调整单词间距使文本左右边缘对齐。这在多栏布局中特别有用：

<div class="newspaper-column">
  <p>这里是两端对齐的文本内容，会自动调整单词间距...</p>
</div>

<style>
.newspaper-column {
  column-count: 2;
  column-gap: 2em;
}
.newspaper-column p {
  text-align: justify;
  hyphens: auto; /* 允许自动断字 */
}
</style>

行高的计算方式

line-height属性有多种赋值方式：

.single-line {
  line-height: 1; /* 无单位数值，相对于当前字体大小 */
}

.fixed-line {
  line-height: 24px; /* 固定像素值 */
}

.relative-line {
  line-height: 1.5em; /* 相对单位 */
}

.global-line {
  line-height: 150%; /* 百分比值 */
}

最佳实践是使用无单位数值，因为它具有继承优势。当在根元素设置时，所有子元素会基于各自字体大小计算行高：

:root {
  line-height: 1.5; /* 基准行高 */
}

h1 {
  font-size: 2rem; /* 实际行高 = 2rem × 1.5 = 3rem */
}

p {
  font-size: 1rem; /* 实际行高 = 1rem × 1.5 = 1.5rem */
}

垂直居中技巧

结合line-height和height可以实现单行文本的垂直居中：

.button {
  height: 40px;
  line-height: 40px; /* 与高度相同 */
}

对于多行文本，需要使用padding或flexbox：

.multi-line {
  padding: 10px 0;
  /* 或者 */
  display: flex;
  align-items: center;
}

响应式行高控制

在不同屏幕尺寸下调整行高可以优化阅读体验：

article {
  line-height: 1.5;
}

@media (min-width: 768px) {
  article {
    line-height: 1.6; /* 大屏幕上增加行距 */
  }
}

文本对齐与方向性

在RTL（从右到左）语言环境中，对齐行为会发生变化：

.rtl-text {
  direction: rtl;
  text-align: start; /* 自动适配为右对齐 */
}

行高的继承问题

行高继承有时会产生意外效果：

.parent {
  font-size: 16px;
  line-height: 1.2em; /* 计算为19.2px */
}

.child {
  font-size: 24px; /* 继承的行高仍是19.2px */
}

解决方法是用无单位数值：

.parent {
  line-height: 1.2; /* 子元素将基于各自字体大小计算 */
}

对齐与表格单元格

表格单元格中的文本对齐需要特别处理：

td {
  vertical-align: middle; /* 垂直居中 */
  text-align: center; /* 水平居中 */
}

行高与间距关系

行高会影响段落间距的视觉效果：

p {
  margin-bottom: 1em;
  line-height: 1.6;
}

高级对齐技术

CSS Grid和Flexbox提供了更精细的对齐控制：

.grid-container {
  display: grid;
  place-items: center; /* 同时水平和垂直居中 */
}

.flex-container {
  display: flex;
  justify-content: center; /* 水平对齐 */
  align-items: center; /* 垂直对齐 */
}

文本对齐的浏览器差异

某些对齐属性在不同浏览器中表现不同：

.justify-fallback {
  text-align-last: right; /* 最后一行对齐方式 */
  -moz-text-align-last: right; /* Firefox前缀 */
}

行高的性能考量

极端的行高值会影响渲染性能：

/* 避免这种写法 */
.performance-issue {
  line-height: 0.1;
}

动态行高调整

使用CSS变量实现动态行高：

:root {
  --base-line-height: 1.4;
}

.adaptive-text {
  line-height: calc(var(--base-line-height) * 1.2);
}