文本对齐与间距

文本对齐与间距

文本对齐与间距是CSS3中控制文字布局的核心属性。合理的对齐方式能让页面结构清晰，恰当的间距设置则提升可读性。这些属性看似简单，实际应用中却有许多细节需要注意。

文本对齐方式

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对齐 */
}

.sub {
  vertical-align: sub; /* 下标 */
}

.super {
  vertical-align: super; /* 上标 */
}

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

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

<div>
  <img src="icon.png" class="middle"> 这个图标会与文字垂直居中
</div>

行高与间距

line-height属性设置行间的距离（行高），可以接受无单位数值、长度值或百分比：

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

.spacious {
  line-height: 1.8;
}

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

示例展示了不同行高效果：

<p class="compact">紧密行距的文字内容...</p>
<p class="spacious">宽松行距的文字内容...</p>

字母与单词间距

letter-spacing和word-spacing分别控制字符间和单词间的空白：

.tight-letters {
  letter-spacing: -0.5px; /* 字符间距缩小 */
}

.loose-letters {
  letter-spacing: 2px; /* 字符间距扩大 */
}

.normal-words {
  word-spacing: normal; /* 默认间距 */
}

.wide-words {
  word-spacing: 0.5em; /* 单词间距扩大 */
}

实际应用示例：

<h2 class="loose-letters">标题字母间距扩大</h2>
<p class="wide-words">这段文字的单词间距被特意加大了。</p>

文本缩进

text-indent属性定义块级元素中第一行文本的缩进：

.indented {
  text-indent: 2em; /* 首行缩进2个字符 */
}

.hanging-indent {
  text-indent: -2em; /* 悬挂缩进 */
  padding-left: 2em; /* 配合使用实现悬挂效果 */
}

悬挂缩进的实际应用：

<div class="hanging-indent">
  这段文字使用了悬挂缩进效果，首行会向左突出，其余行保持正常对齐。
</div>

文本方向与书写模式

direction和writing-mode属性控制文本流动方向：

.rtl {
  direction: rtl; /* 从右向左 */
  unicode-bidi: bidi-override;
}

.vertical-rl {
  writing-mode: vertical-rl; /* 垂直方向，从右向左 */
}

垂直排版示例：

<p class="vertical-rl">
  这段文字将垂直排列
</p>

空白处理

white-space属性控制元素内空白的处理方式：

.nowrap {
  white-space: nowrap; /* 不换行 */
}

.pre {
  white-space: pre; /* 保留空白，类似<pre>标签 */
}

.pre-wrap {
  white-space: pre-wrap; /* 保留空白但自动换行 */
}

.pre-line {
  white-space: pre-line; /* 合并连续空白，保留换行 */
}

代码显示示例：

<div class="pre">
  这段文字中的空白    会被保留，
  换行也会被保留。
</div>

文本装饰与转换

虽然不属于严格意义上的对齐与间距，但text-decoration和text-transform常与排版相关：

.underlined {
  text-decoration: underline wavy red; /* 波浪下划线 */
}

.uppercase {
  text-transform: uppercase; /* 全部大写 */
}

.capitalize {
  text-transform: capitalize; /* 单词首字母大写 */
}

多列文本布局

column-count和column-gap实现多列文本排版：

.multicol {
  column-count: 3;
  column-gap: 2em;
  column-rule: 1px solid #ddd;
}

实际应用：

<div class="multicol">
  这段文字会被分成三栏显示，每栏之间有2em的间距和1px的分隔线。
  多栏布局特别适合新闻类网站的长篇文章展示。
</div>

响应式文本间距

结合媒体查询实现响应式文本间距：

.responsive-text {
  line-height: 1.4;
  letter-spacing: 0.5px;
}

@media (min-width: 768px) {
  .responsive-text {
    line-height: 1.6;
    letter-spacing: 0.8px;
  }
}

文本阴影与轮廓

text-shadow可以为文本添加视觉效果，间接影响视觉间距：

.shadowed {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.multi-shadow {
  text-shadow: 
    1px 1px 1px #000,
    -1px -1px 1px #fff; /* 多重阴影 */
}

实际应用场景

导航菜单中的文本对齐：

.nav-menu {
  display: flex;
  justify-content: space-between; /* 水平分布 */
  align-items: center; /* 垂直居中 */
}

.nav-item {
  padding: 0 15px;
  line-height: 50px; /* 与导航栏高度一致实现垂直居中 */
}

表单元素的文本对齐：

.form-group {
  margin-bottom: 1em;
  line-height: 2; /* 增大行高提升表单可读性 */
}

.form-label {
  display: inline-block;
  width: 120px;
  text-align: right;
  padding-right: 10px;
}