Get Marp to center some content horizontally and vertically

Question

I am using Marp which is a tool to create presentations in markdown and convert it into pdf. On the first slide I have some content such as this:

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

All of this is top center aligned. What I would want is that the text to be middle aligned(vertically and horizontally) and the image to be bottom right aligned. I couldn't find much about it in the Marp documentation. I am hoping someone with better css know how could help! Believe me, I searched for over 2 hours on this, but my lack of css skills is getting me nowhere.

Answer 1

There are three options:

1. Make the image part of the background.
It sounds like you are trying to put a logo on the slide in the bottom right. In this case, if it is to be on most slides - just create a new background with the image in the bottom right. Then set the image as the slides' background, using the bg keyword in the alt-text box:

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

2. Create an image background and offset it.
(Perhaps less applicable for a 'logo in the corner' effect put works well for other images). Insert the image and use the bg keyword in the alt-text box, along with the either right or left .

![bg right](image.jpg)

This can be further customised with percentages - adjusting how much of the slide is given over to the background image.

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

The image can also be scaled with an additional percentage. The example below sets 40% of the slide on the right-hand side over the background, and the image is then scaled to 80% of it's original size.

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

3. Use the footer directive and adjust the css to suit.
This allows for great flexibility of sizing and positioning of the image.

Use Marp's footer directive , and include the image link within that. This can be applied globally or locally to individual slides (as in the example below).

Then you can change the css to customise the size an position of the image. This can be done through a theme css or via the markdown text with tags (as below).

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

Try something like this :

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

where x is your width in %

Source (french) : https://www.unixmail.fr/informatique/presentation-avec-marp/

Answer 3

尝试浮动右内联样式：

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