文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Marp或Marpit中对齐文本标题下的图像

问如何在Marp或Marpit中对齐文本标题下的图像
EN

Stack Overflow用户

提问于 2021-09-12 20:02:43

回答 1查看 677关注 0票数 1

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

这段代码的问题是，它会生成幻灯片，其中文本和图像居中对齐，如下图所示：

我想有一个标题的文本，而不是交叉图像。

我如何才能做到这一点？

css

markdown

marpit

marp

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-16 13:01:15

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69154809

复制

相似问题

问如何在Marp或Marpit中对齐文本标题下的图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Marp或Marpit中对齐文本标题下的图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Marp或Marpit中对齐文本标题下的图像
EN