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

尝试浮动右内联样式：

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

Answer 2

尝试这样的事情：

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

其中x是您的宽度（％）

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

Answer 3

共有三个选项：

1。使图像成为背景的一部分。
听起来您正在尝试在右下角的幻灯片上放置徽标。在这种情况下，如果要在大多数幻灯片上使用它-只需在图像的右下角创建一个新的背景即可。然后使用alt文本框中的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 directive，并在其中添加图片链接。可以将其全局或局部应用于单个幻灯片（如下例所示）。

然后，您可以更改CSS以自定义图像位置的大小。这可以通过主题CSS或带有标签的降价文字（如下所示）来完成。

<!-- _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.

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

3 个答案: