如何实现Div内两个Span文本的指定对齐效果？

可以通过Flexbox布局轻松实现你要的效果，它能精准分配容器内的剩余空间，让text2填充指定区域并居中。以下是修改后的代码：

HTML结构 #

<div class="container">
  <span class="text1">text1</span>
  <span class="text2">text2</span>
</div>

CSS样式 #

.container {
  display: flex; /* 启用flex布局模型 */
  align-items: center; /* 可选：让两个文本垂直居中对齐 */
  width: 100%; /* 确保容器占满可用宽度 */
}

.text1 {
  margin-left: 20px; /* 设置左侧边距，可按需调整数值 */
  white-space: nowrap; /* 防止text1换行，保证剩余空间计算准确 */
}

.text2 {
  flex: 1; /* 占据容器内除text1外的所有剩余空间 */
  text-align: center; /* 在自身区域内居中对齐文本 */
  background-color: #a87dc2; /* 可选：添加背景色标记紫色区域 */
}

关键说明 #

• display: flex让父容器内的元素采用弹性布局，为空间分配提供基础。
• .text1的white-space: nowrap避免文本换行，确保剩余空间是基于text1的实际宽度计算的。
• .text2的flex: 1是核心：它会自动填充text1右侧到容器右边缘的所有空间，再配合text-align: center就能实现文本在该区域内的居中效果。

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