如何通过CSS实现div内文本从底部排列，调整div宽度时优先填充底部？

算力阿峰

2026-11-3

文本底部锚定排布实现方案

失效原因

原代码仅通过行内元素的vertical-align属性做对齐，无法实现块级文本的底部锚定——行内垂直对齐只在同一行文本块内生效，没法让整个文本块的底边贴附容器下沿，文本换行时自然会从块的顶部开始向下堆叠，和预期排布逻辑反向。

修改方案

通过弹性布局调整容器对齐规则，让内部文本块的底边完全贴附容器下沿，文本自动换行时会从下往上堆叠填充：

外层.big-intro-text容器补充布局属性：设置固定承载高度、开启弹性布局，用align-items: flex-end将子元素的垂直对齐基准设为容器底部，用justify-content: center实现文本块水平居中，替换原代码中align="center"的旧式写法
内部文本div移除无效的vertical-align: text-bottom属性，保留原有宽度、文字对齐、边框配置即可，弹性布局会自动接管子元素的垂直定位逻辑

调整后完整代码

*{
  font-family: 'Heebo', sans-serif;
  margin: 0;
  padding: 0;
}
.big-intro-text{
  font-size: 100px;
  width: 100%;
  position: absolute;
  /* 底部锚定核心配置 */
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  padding: 2rem;
}
.big-intro-text div{
  border: solid 1px green;
  text-align: left;
  color: gray;
  max-width: 800px;
  height: auto;
}