如何用CSS让div内正方形中的文本居底对齐？

我来帮你搞定这个文本居底的小问题！你之前尝试的align-self: flex-end没生效，核心原因是你的.square元素本身没有启用flex布局——align-self是flex子元素的专属属性，只有当父容器是flex容器时它才会起作用，而你之前只给外层的.squares加了flex，.square本身还是普通块级元素，所以那行代码自然不会生效。

解决方案：给.square添加flex布局控制内部文本位置 #

只需要修改.square的CSS样式，让它成为flex容器，然后用flex属性把文本推到底部：

.squares { 
  display: flex; 
  justify-content: space-between; 
  align-items:center; 
  padding: 1rem; 
  background-color: rgb(238, 238, 238); 
  flex-wrap: wrap; 
}
.squares .square { 
  width: 200px; 
  text-align: center; 
  height: 200px; 
  border: 3px solid rgb(145, 147, 150); /* 简化border的复合写法 */
  border-radius: 10px; 
  background-color: rgb(255, 255, 255); 
  display: flex; /* 让正方形自身成为flex容器 */
  align-items: flex-end; /* 垂直方向将内容对齐到底部 */
  padding-bottom: 1rem; /* 可选：给文本添加底部内边距，避免紧贴边框 */
}

关键说明： #

• display: flex：把.square变成flex容器，这样内部的文本作为子元素，就能被flex布局的属性控制。
• align-items: flex-end：这个属性会让flex容器内的所有子元素，在垂直方向上对齐到容器的底部，完美实现你要的文本居底效果。
• 额外的padding-bottom是为了优化视觉体验，防止文本紧贴正方形的边框，你可以根据自己的需求调整这个值的大小。

如果之后你的正方形内部需要添加更多元素（比如图标+文本），也可以用flex-direction: column配合justify-content: flex-end来实现更复杂的布局，但针对当前单一文本的场景，上面的方案是最简洁有效的。

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