div与文本对齐问题：如何将标题放置在带动画效果的div内

现有代码问题 #

• 父容器.introbox-one设置的固定高度16px远小于h1标题的默认字号/行高，会导致标题溢出容器无法正常显示
• h1的flex布局设置冗余，仅需右对齐效果的话无需用flex实现
• 动画默认结束后会回弹到初始状态，需要补充属性固定最终效果

修正后代码 #

CSS 代码

.introbox-one {
  width: 80%;
  /* 替换固定高度为最小高度，避免内容溢出 */
  min-height: 36px;
  border: 1px solid #9A00FF;
  padding: 10px;
  background-color: #9A00FF;
  /* 添加forwards属性让动画结束后保持最终状态 */
  animation: introbox-one 1s ease-in forwards;
  /* 父容器设flex布局，直接实现子元素右对齐+垂直居中 */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@keyframes introbox-one {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

h1 {
  margin: 0;
  /* 可选：设置白色字体，适配紫色背景提高可读性 */
  color: #ffffff;
}

HTML 代码（无需修改）

<div class="introbox-one">
   <h1>THIS IS A HEADER</h1>
</div>

可选调整 #

如果你希望容器滑入过程中，标题始终固定在页面右侧不随容器滑动，只需给父容器添加overflow: hidden属性，同时给h1添加固定定位即可。

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