如何在 Marp 或 Marpit 中对齐文本 header 下方的图像

Question

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

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

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

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

我怎样才能做到这一点？

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

因为它留下 space 用于信息性文本，如下所示

如何在 Marp 或 Marpit 中对齐文本 header 下方的图像

How to align image below text header in Marp or Marpit

html

css

markdown

marpit

marp