Center leaflet in a rmarkdown document

Question

I want to create an html document with a centered leaflet widget inside it.

---
title: "Exemple"
author: "Antoine Bichat"
date: "31/08/2018"
output: html_document
---

```{r leaflet, fig.align="center"}
library(leaflet)

leaflet() %>%
  addTiles() %>% 
  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")
```

The first idea with fig.align="center" doesn't work.

I found this question and I adapted it to my case:

<style>
/* resize the widget container */
.leaflet { 
  width: 80% !important;
}

/* center the widget */
div.leaflet-control-container {
  margin: auto !important;
}
</style>

but if I don't want to have an out.width of 100% (and I don't want to), it doesn't work.

Or maybe I did it wrong... Actually I prefer a 100% R/Rmarkdown solution but I'm open to everything :)

Answer 1

Try the CSS code margin: auto for .html-widget

---
title: "Exemple"
author: "Antoine Bichat"
date: "31/08/2018"
output: html_document
---

<style>
.html-widget {
    margin: auto;
}
</style>

```{r leaflet, fig.align="center"}
library(leaflet)

leaflet() %>%
  addTiles() %>% 
  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")
```

That will center every htmlwidget. You can also put :

<style>
.leaflet {
    margin: auto;
}
</style>

For centering only the leaflet.