获取 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. 使图像成为背景的一部分。
听起来您正试图在右下角的幻灯片上放置徽标。 在这种情况下，如果它要出现在大多数幻灯片上 - 只需使用右下角的图像创建一个新背景。 然后使用 alt 文本框中的bg关键字将图像设置为幻灯片的背景：

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

2. 创建一个图像背景并偏移它。
（也许不太适用于“角落里的徽标”效果，但对于其他图像效果很好）。 插入图像并在 alt 文本框中使用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

尝试这样的事情：

![x% center](images/logo.png) 

其中 x 是以 % 为单位的宽度

来源（法语）： https : //www.unixmail.fr/informatique/presentation-avec-marp/

Answer 3

尝试浮动右内联样式：

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