如何在 Marp 或 Marpit 中对齐文本标题下方的图像答案

【问题标题】：How to align image below text header in Marp or Marpit如何在 Marp 或 Marpit 中对齐文本标题下方的图像
【发布时间】：2021-09-21 16:12:08
【问题描述】：

我正在通过 VScode 使用 Marpit。这是 mi 最小工作示例：

---
marp: true
---

This should go in to the header and picture should be bellow it, but right now it is the middle of the picture

![bg contain](https://csgeekshub.com/wp-content/uploads/2020/07/C-Program-compilation-steps-and-process.jpg)

此代码的问题在于它会生成幻灯片，其中文本和图像对齐到中心，如下图所示：

我希望将文本作为标题而不是交叉图像。

我怎样才能做到这一点？

【问题讨论】：

标签： html css markdown marpit marp

【解决方案1】：

在 Marpit 中，您有一个image syntax，可以启用基本的图像修改。在许多情况下，适合缩放图像而不是将其置于背景中。对于标题，您通常使用领先的主题标签。考虑以下

---
marp: true
theme: default
style: |
    img[alt~="center"] {
      display: block;
      margin: 0 auto;
    }
---

## A Beautiful Headline

![w:500 center](https://csgeekshub.com/wp-content/uploads/2020/07/C-Program-compilation-steps-and-process.jpg)

我在其中添加了center 以水平对齐图像，从而产生了这张幻灯片：

这是个人喜好问题，但我更倾向于使用justify-content 将标题置于顶部的以下排列方式

---
marp: true
theme: default
style: |
    section{
      justify-content: flex-start;
    }
---

## A Beautiful Headline

- some valid point
- another interesting fact
- even more convincing

![bg right:50% w:500](https://csgeekshub.com/wp-content/uploads/2020/07/C-Program-compilation-steps-and-process.jpg)

因为它为信息性文本留出了空间，如下所示

【讨论】：

非常感谢。如果我理解正确，那么您使用的是样式指令marpit.marp.app/directives，它将用于每张幻灯片？而且，如果宽度或高度（不是两者）都用作图像参数，那么图像会通过保持其比例来调整大小？是否也可以以某种方式设置图像的图像宽度，例如到幻灯片宽度的 80%，所以我不需要设置图像的确切大小？非常感谢
还有一个问题：根据您的第二个示例，似乎所有幻灯片都包含在 section 标签中？
您可以传递相对大小，例如![bg right:50% h:10% w:80%](https://your_img_link.jpg)，这会改变比率。如果您想保留比率，请仅指定宽度或高度。您对第二个示例是正确的，其中部分标签将应用于所有幻灯片。要限制范围，您可以 <style scoped> section{justify-content: center;} </style> 希望有所帮助。