如何在Squarespace中覆盖align-center-vert类实现顶部垂直对齐？

首先，你之前尝试的代码position: top!important是无效的——CSS里的position属性没有top这个取值，top是用来配合position: relative/absolute/fixed等属性设置偏移的，不是position本身的属性值，这就是代码不生效的核心原因。

接下来，针对Squarespace的sqs-slice-group容器，这类元素通常是用Flexbox实现垂直居中的，align-center-vert类大概率是给容器设置了align-items: center（横向flex布局时）或者justify-content: center（纵向flex布局时）来实现垂直居中效果。我们需要覆盖这些属性来让内容顶部对齐：

尝试以下CSS代码 #

<style>
/* 针对性覆盖垂直居中的Flex属性 */
.sqs-slice-group.align-center-vert {
  align-items: flex-start !important; /* 横向flex布局时，控制垂直方向对齐到顶部 */
  justify-content: flex-start !important; /* 纵向flex布局时，控制垂直方向对齐到顶部 */
  transform: none !important; /* 如果原样式用transform: translateY(-50%)实现居中，直接取消该效果 */
  min-height: auto !important; /* 如果容器设置了固定min-height撑高，去掉它让容器贴合内容高度 */
}
</style>

代码注入步骤 #

1. 登录你的Squarespace后台
2. 进入设置 > 高级 > 代码注入
3. 将上述代码粘贴到**页眉（Header）或页脚（Footer）**区域（推荐页眉，样式加载更早）
4. 保存设置后刷新页面查看效果

调试小技巧 #

如果还是不生效，打开浏览器开发者工具（按F12），选中这个div.sqs-slice-group.align-center-vert元素，查看它的计算样式（Computed）：

• 确认是否有align-items: center、justify-content: center或者transform相关的居中属性
• 找到原样式的具体来源，针对性地用!important覆盖对应的属性即可

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