Marp CLI 中实现幻灯片内容顶部对齐的方法

在 Marp CLI 项目中，用户经常需要调整幻灯片内容的垂直对齐方式。默认情况下，Marp 主题的内容可能不是顶部对齐的，这在某些设计场景下会影响展示效果。

解决方案

要实现幻灯片内容的顶部对齐，可以通过 CSS 的 align-content 属性来控制。这个属性定义了浏览器如何在内容项之间和周围分配空间，非常适合用于调整垂直对齐。

具体实现方法是在 Marp 幻灯片文档中添加以下样式定义：

<style>
section {
  align-content: start;
}
</style>

技术原理

align-content 是 CSS 弹性盒子布局(Flexbox)的一个属性，它控制交叉轴上的对齐方式。在 Marp 的幻灯片布局中：

1. 每个 <section> 元素本质上是一个弹性容器
2. 默认情况下可能使用 center 或 space-around 等值
3. 设置为 start 会使所有内容向容器顶部靠齐

实际应用场景

这种顶部对齐方式特别适合以下情况：

• 当幻灯片内容较少时，避免内容集中在中间造成大量空白
• 需要严格遵循某些设计规范，要求内容必须从顶部开始
• 在创建标题幻灯片时，希望标题固定在顶部位置

扩展知识

除了 start 值，align-content 还支持其他常用值：

• center: 内容垂直居中(默认值之一)
• end: 内容向底部对齐
• space-between: 首项顶对齐，末项底对齐，中间均匀分布
• space-around: 每项周围分配相等空间

掌握这些对齐方式可以让你更灵活地控制 Marp 幻灯片的布局效果。