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

Question

我正在通过 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)

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

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

我怎样才能做到这一点？

标签： htmlcssmarkdownmarpitmarp

Answer 1

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

---
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)

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