我正在使用Marp，這是一個在markdown中創(chuàng)建演示文稿并將其轉換為pdf的工具。在第一張幻燈片上，我有這樣一些內容:

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

所有這些都是頂部居中對齊的。我想要的是文本居中對齊(垂直和水平)，圖像右下對齊。我在Marp文檔中找不到太多關于它的信息。我希望有人與更好的css知道如何可以幫助！相信我，我為此搜索了2個多小時，但我缺乏css技能，毫無進展。

有三個選項:

1.使圖像成為背景的一部分。 聽起來好像你正試圖把一個標志放在右下角的幻燈片上。在這種情況下，如果它出現(xiàn)在大多數幻燈片上，只需在右下角創(chuàng)建一個新的背景。然后使用alt-text框中的bg關鍵字將圖像設置為幻燈片的背景:

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

2.創(chuàng)建一個圖像背景，并抵消它。 (可能不太適用于“角上的標志”效果，但對其他圖像效果很好)。 插入圖像，并在alt-text框中使用bg關鍵字，以及左右鍵。

![bg right](image.jpg)

這可以通過百分比進一步定制-調整幻燈片給背景圖像的比例。

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

圖像也可以按額外的百分比縮放。 下面的示例將幻燈片右側的40%設置為背景，然后將圖像縮放到原始大小的80%。

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

3.使用footer指令并根據需要調整css。 這使得圖像的大小和位置具有很大的靈活性。

使用Marp的頁腳指令，并在其中包含圖像鏈接。這可以全局或局部應用于單個幻燈片(如下例所示)。

然后你可以改變css來定制圖片的大小和位置。這可以通過主題css或帶有標簽的markdown文本來實現(xiàn)(如下)。

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

試著這樣做:

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

其中x是你的寬度百分比

來源(法語):https://www . UNIX mail . fr/informatique/presentation-avec-marp/

今天對此進行了測試，效果良好:

<style>
img[alt~="center"] {
  display: block;
  margin: 0 auto;
}
</style>

![w:640 center](image.png)

資料來源:https://github.com/marp-team/marpit/issues/141

嘗試右浮動內嵌樣式:

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