如何用CSS将三个文本元素分别对齐父元素的左、中、右侧？

要让.name左对齐、.about-me居中、.language右对齐到父元素.home，可以用以下几种实用方案：

方法1：Flexbox布局（最推荐） #

这是现代CSS里最简洁易维护的方案，兼容性覆盖绝大多数现代浏览器。

方案A：子元素平分父元素宽度 #

给父元素开启Flex布局，让三个子元素各占1/3宽度，再分别设置文本对齐：

.home {
  display: flex;
  width: 100%; /* 确保父元素占满可用宽度 */
}

.name {
  flex: 1;
  text-align: left;
}

.about-me {
  flex: 1;
  text-align: center;
}

.language {
  flex: 1;
  text-align: right;
}

方案B：子元素保持自身宽度，仅对齐位置 #

如果不想强制子元素平分宽度，用justify-content: space-between让元素自动分布在左、中、右位置：

.home {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.name {
  text-align: left;
}

.about-me {
  text-align: center;
}

.language {
  text-align: right;
}

方法2：Grid布局 #

适合需要更复杂网格布局的场景，实现起来同样简单：

.home {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 父元素分为三等分列 */
  width: 100%;
}

.name {
  text-align: left;
}

.about-me {
  text-align: center;
}

.language {
  text-align: right;
}

方法3：传统浮动布局（仅兼容老旧浏览器用） #

如果要兼容非常旧的浏览器，可以用浮动，但需要处理父元素高度塌陷问题：

.home {
  width: 100%;
  overflow: hidden; /* 清除浮动，避免父元素高度塌陷 */
}

.name {
  float: left;
}

.about-me {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

.language {
  float: right;
}

内容的提问来源于stack exchange，提问作者Егор Егоров