html - 让 Marp 将一些内容水平和垂直居中

Question

我正在使用 Marp，它是一种在 markdown 中创建演示文稿并将其转换为 pdf 的工具。在第一张幻灯片上，我有一些内容，例如:

# <center> Working with Virtual Box </center>
<img align="right" src="images/logo.png" width="250">

所有这些都是顶部居中对齐的。我想要的是文本居中对齐(垂直和水平)，图像右下对齐。我在 Marp 文档中找不到太多相关信息。我希望有更好的 CSS 的人知道如何提供帮助!相信我，我为此搜索了 2 个多小时，但我对 CSS 技能的缺乏让我一无所获。

Answer 1

共有三个选项:

<强>1。使图像成为背景的一部分。
听起来您正试图在右下角的幻灯片上放置 Logo 。在这种情况下，如果它要出现在大多数幻灯片上 - 只需创建一个带有右下角图像的新背景。然后使用 alt-text 框中的 bg 关键字将图像设置为幻灯片的背景:

![bg](background-with-logo.jpg)

<强>2。创建图像背景并对其进行偏移。
(也许不太适用于“Angular 落里的标志”效果，但对其他图像效果很好)。插入图像并在替代文本框中使用 bg 关键字，以及 right 或 left。

![bg right](image.jpg)

这可以通过百分比进一步自定义 - 调整幻灯片中有多少内容交给了背景图像。

![bg right:40%](image.jpg)

图像也可以按额外的百分比缩放。下面的示例将右侧幻灯片的 40% 设置在背景上方，然后图像缩放到其原始大小的 80%。

![bg right:40% 80%](image.jpg)

<强>3。使用页脚指令并调整 css 以适应。
这样可以非常灵活地调整图像的大小和位置。

使用 Marp 的页脚 directive ，并在其中包含图像链接。这可以全局或局部应用于单个幻灯片(如下例所示)。

然后您可以更改 css 来自定义图像的大小和位置。这可以通过主题 css 或通过带有标签的 Markdown 文本来完成(如下所示)。

<!-- _footer: "![](image.jpg)" -->

<style>
footer {
    height: 200px;
    margin-bottom: -80px;
}
footer img {
    height: 100px;
    float: right;
 }
</style>

# Logo - footer

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc molestie euismod ipsum, et malesuada sem condimentum a.
Sed pellentesque arcu mattis massa porttitor volutpat.