使用fullPage.js时如何将文本对齐到容器左上角？

fullPage.js 默认会给所有.section容器设置flex布局，且默认垂直对齐方式为居中，这就是你设置margin-top、vertical-align都不生效的原因，这些属性在flex默认居中对齐的规则下无法让元素移动到顶部。

你可以选择以下任意一种方案解决：

• 方案1：修改容器对齐规则
  给你的.s1a类添加样式覆盖fullPage的默认配置，直接让整个容器的内容靠顶部对齐，后续调整间距也更方便：

  /* 选择器写成.section.s1a可以提高优先级，无需使用!important也能覆盖默认样式 */
  .section.s1a {
    background: url(/https://www.well-played.com.au/wp-content/uploads/2020/09/ps5-play-has-no-limits-video-thumb-01-en-11jun20.jpg);
    background-size: cover;
    align-items: flex-start;
    padding-top: 20px; /* 自行调整数值控制内容距离顶部的间距 */
  }
  
  .s1a h1 {
    text-align: left;
    margin-left: 2em;
    margin-top: 0; /* 可根据需要调整h1的上边距 */
    font-size: 4rem;
  }
  

• 方案2：给h1单独设置定位
  如果不想修改容器的全局布局规则，也可以单独给h1设置绝对定位固定位置：

  .s1a h1 {
    text-align: left;
    margin-left: 2em;
    font-size: 4rem;
    position: absolute;
    top: 20px; /* 自行调整数值控制距离顶部的间距 */
  }
  

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