Ionic 5布局问题：实现文本Label居Chip上方且二者垂直居中

我来帮你搞定这个布局问题～你现在的核心问题是.contenedor-monto用了默认的横向flex布局，导致Label和Chip并排显示，只需要调整flex的方向和对齐方式就能实现目标效果。

修改后的SCSS代码 #

ion-card {
  width: 80%;
  background-color: white;
  border-radius: 6rem;
  height: 7rem;
}

.nombre {
  font-size: 2rem;
  font-weight: bold;
  color: black;
}

.fecha {
  line-height: 1rem;
  font-size: 1.3rem;
}

.contenedor-monto {
  display: flex;
  flex-direction: column; /* 改为垂直排列，让Label在Chip上方 */
  justify-content: center; /* 让容器内元素垂直居中 */
  align-items: flex-end; /* 保持内容右对齐，匹配原有需求 */
  gap: 0.5rem; /* 给两个元素加一点间距，避免拥挤 */
}

.monto {
  font-size: 1.8rem;
  font-weight: bold;
}

ion-chip {
  height: 2.5rem;
  padding: 0 1rem; /* 给Chip内文字增加左右内边距，视觉更舒适 */
}

关键修改说明 #

• flex-direction: column：将容器内的元素排列方向从横向改为纵向，直接实现Label在Chip上方的布局
• justify-content: center：让Label和Chip在容器内垂直居中，和左侧的姓名日期区域保持视觉平衡
• align-items: flex-end：确保两个元素的内容都靠右对齐，和你原来设置的ion-text-end效果一致
• gap和Chip的padding都是优化视觉体验的细节调整，可根据你的实际需求调整数值

你的HTML代码完全不需要修改，保持原样即可。调整后就能完美实现Label位于Chip上方且二者垂直居中的效果啦～

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