文本对齐与行高控制

文本对齐与行高控制

文本对齐和行高是CSS中控制文本布局的两个核心属性。合理的设置能让页面更美观易读，反之则可能导致视觉混乱。对齐方式决定文本在容器中的水平位置，而行高直接影响行间距和垂直节奏。

文本对齐方式

text-align属性控制文本的水平对齐方式，常用值包括：

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

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

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

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

两端对齐在长段落中特别有用，它会让文本左右边缘都对齐容器边界。但要注意在窄容器中可能出现单词间距过大的问题：

<p class="justify-align">
  这个段落将展示两端对齐效果。注意观察每行的左右边缘如何对齐容器边界，
  浏览器会自动调整单词间距来实现这种效果。
</p>

垂直对齐控制

vertical-align属性控制行内元素的垂直对齐，常见于表格单元格或行内元素：

.baseline {
  vertical-align: baseline; /* 默认，与父元素基线对齐 */
}

.middle {
  vertical-align: middle; /* 元素中部与父元素基线加x-height的一半对齐 */
}

.top {
  vertical-align: top; /* 元素顶部与行框顶部对齐 */
}

.bottom {
  vertical-align: bottom; /* 元素底部与行框底部对齐 */
}

实际应用中，图片与文本混排时特别有用：

<div>
  <img src="icon.png" class="middle" /> 
  <span>这段文本将与图片垂直居中对齐</span>
</div>

行高(line-height)详解

行高决定文本行之间的垂直间距，可用单位包括无单位数值、px、em或百分比：

.compact {
  line-height: 1.2; /* 推荐使用无单位值，相对于当前字体大小 */
}

.spacious {
  line-height: 1.8;
}

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

无单位数值是最佳实践，因为它们会继承时基于当前字体大小计算。例如：

body {
  font-size: 16px;
  line-height: 1.5; /* 实际计算为24px */
}

.small-text {
  font-size: 14px; /* 行高自动计算为21px */
}

行高的盒模型影响

行高不仅影响文本间距，还决定内联盒子的最小高度：

<div style="background: #eee; font-size: 16px; line-height: 2;">
  这个div的高度将由行高决定
</div>

即使没有文本内容，设置line-height也会影响空元素的高度：

.empty-box {
  line-height: 100px;
  background: lightblue;
}
/* 这个空div将有100px高 */

多行文本的特殊处理

对于多行文本，需要考虑行高与垂直间距的关系：

.multiline {
  line-height: 1.5;
  margin: 1em 0;
}

/* 更精确的控制方式 */
.paragraph {
  line-height: 1.5;
  margin-top: calc(1em * 1.5);
  margin-bottom: calc(1em * 1.5);
}

响应式设计中的调整

在不同屏幕尺寸下可能需要调整行高：

.article {
  line-height: 1.6;
}

@media (max-width: 768px) {
  .article {
    line-height: 1.8; /* 在小屏幕上增加行高提高可读性 */
  }
}

与flexbox/grid布局的结合

在现代布局中，文本对齐可以与flexbox属性配合使用：

.card {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  text-align: center; /* 文本内容居中 */
  line-height: 1.4;
}

实际应用案例

新闻网站正文的典型设置：

.article-body {
  font-size: 1.1rem;
  line-height: 1.8;
  text-align: justify;
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem;
}

代码块的特定处理：

pre {
  line-height: 1.4;
  tab-size: 2;
  text-align: left; /* 覆盖可能的继承值 */
  font-family: monospace;
}

浏览器渲染差异

不同浏览器对文本对齐和行高的渲染可能有细微差别。特别是text-align: justify在移动端的表现：

.justify-fallback {
  text-align: left;
}

@supports (text-align-last: justify) {
  .justify-fallback {
    text-align: justify;
    text-align-last: center;
  }
}

性能考量

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

/* 避免这种极端设置 */
.problematic {
  line-height: 0.1; /* 导致文本重叠 */
}

.too-sparse {
  line-height: 5; /* 产生过多空白 */
}