如何使用CSS实现3段文本对齐设置与间距调整？

基础实现（三段各占一行场景） #

直接给每个文本块单独设置对齐属性，用margin控制段间距即可，以下是可直接复用的代码：

HTML结构 #

<div class="text-wrap">
  <p class="align-left">第一段左对齐文本内容</p>
  <p class="align-center">第二段居中对齐文本内容</p>
  <p class="align-right">第三段右对齐文本内容</p>
</div>

CSS样式 #

/* 先清除浏览器默认边距，避免默认样式干扰间距计算 */
.text-wrap p {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.6;
}

.align-left {
  text-align: left;
  /* 自定义和下一段的间距，数值按需修改 */
  margin-bottom: 20px;
}

.align-center {
  text-align: center;
  /* 自定义和下一段的间距，数值按需修改 */
  margin-bottom: 28px;
}

.align-right {
  text-align: right;
}

常见失效原因排查 #

• 对齐属性不生效：text-align 仅作用于块级元素、inline-block元素、表格单元格，如果目标文本是<span>这类纯行内元素，需要先给元素加display: block或display: inline-block，或者把对齐属性设置在它的父级块元素上。
• 间距不符合预期：浏览器默认会给<p>、<h>这类标签自带上下margin，不提前重置的话，自定义的margin会和默认值叠加，怎么调数值都不对。

特殊场景：三段文本同一行显示 #

如果需要三段文本在同一行内分别靠左、居中、靠右，不要用上面的块级写法，直接给父元素开flex布局实现：

.text-inline-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 控制三段文本之间的间距 */
  gap: 12px;
}

注意：flex布局下子元素设置的text-align不会生效，直接通过父元素的justify-content控制对齐位置即可，避免重复写属性造成样式冲突。

内容的提问来源于stack exchange，提问作者Jeff