Search code examples
rxaringan

Xaringan: center image within one of two columns in a two columns layout


I am using a two-column layout and I was wondering if I could center the image within the second column.

This is the YAML:

---
title: "Title"
subtitle: 
author: 
date: " </br> `r Sys.Date()`"
output:
  xaringan::moon_reader:
    lib_dir: libs
    css: ["default", "custom.css", "custom-fonts.css"]
    nature:
      beforeInit: "http://www.jvcasillas.com/ru_xaringan/js/ru_xaringan.js"
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
      ratio: "16:9"
---

The slide:

---
# Introduction

.pull-left[
- One bullet.
-  Another bullet.
- another 
- another
- another

]
.pull-right[

<img src="img/book.jpg" alt="drawing" width="200"/>

]

And this is how it looks like:

enter image description here

As you can see, the image is "hanging" from the top left corner of the second column. I was wondering if I could have it centered within the second column.


Solution

  • Following Tomas Capretto's suggestion:

    ---
    # Introduction
    
    .pull-left[
    - One bullet.
    -  Another bullet.
    - another 
    - another
    - another
    
    ]
    
    .pull-right[ .center[ <img src="img/book.jpg" alt="drawing" width="200"/> ] ]
    

    Here is the result:

    enter image description here