让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.创建图像背景并对其进行偏移。

(可能不太适用于“标志在角落”的效果，put适用于其他图像)。插入图像，并在alt-文本框中使用bg关键字以及right或left。

![bg right](image.jpg)

这可以通过百分比进一步定制-调整幻灯片中有多少部分被提供给背景图像。

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

还可以使用额外的百分比对图像进行缩放。下面的例子将幻灯片右手边的40%放在背景上，然后图像被缩放到原始大小的80%。

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

css 3.使用footer指令并调整以适应需要。

这使得图像的大小调整和定位具有很大的灵活性。

使用Marp的footer 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.

Answer 2

尝试如下所示：

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

其中x是您的宽度，单位为%

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

Answer 3

尝试float right内联样式：

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