让 Marp 将某些内容水平和垂直居中

Question

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

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

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

Answer 1

有以下三种选择：

1. 将图像作为背景的一部分。
听起来您正试图在右下角的幻灯片上放置徽标。在这种情况下，如果它出现在大多数幻灯片上 - 只需创建一个新背景，并将图像放在右下角。bg然后使用替代文本框中的关键字将图像设置为幻灯片的背景：

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

2. 创建图像背景并对其进行偏移。
（也许不太适用于“角落里的徽标”效果，但适用于其他图像）。插入图像并bg在替代文本框中使用关键字以及right或left。

![bg right](image.jpg)

这可以通过百分比进一步定制 - 调整幻灯片的背景图像数量。

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

图像还可以使用额外的百分比进行缩放。下面的示例将右侧幻灯片的 40% 设置为背景上方，然后将图像缩放至原始大小的 80%。

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

3. 使用页脚指令并调整 css 以适应。
这使得图像的大小和定位具有很大的灵活性。

使用 Marp 的footer 指令，并在其中包含图像链接。这可以全局或本地应用于各个幻灯片（如下例所示）。

然后您可以更改 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.

Answer 2

尝试右浮动内联样式：

<img src="images/logo.png" style="float:right" width=250>