center googleVis plot in knitr

Question

I am playing around with googleVis in knitr and typically one can center a plot by using fig.align="center", however, this does not appear to work for googleVis plots. How can I center a googleVis plot in the middle of the page?

Here is the MWE Rmd file

```{r setup, include=FALSE}
# set global chunk options
opts_chunk$set(cache=TRUE)
```
------
## Page 1

```{r echo = FALSE, results="asis", fig.align="center", messages=FALSE}
dat <- data.frame(party=c("CDU", "FDP", "CSU", "SPD",
                          "The Left", "The Greens"),
                  members.of.parliament=c(193, 93, 44, 
                                          146, 76, 68))
library(googleVis)
## Doughnut chart - a pie with a hole
doughnut <- gvisPieChart(dat, 
                      options=list(
                        width=500,
                        height=500,
                        slices="{0: {offset: 0.2},
                          1: {offset: 0.2},
                          2: {offset: 0.2}}",
                        legend='none',
                        colors="['black','orange', 'blue', 
                        'red', 'purple', 'green']",
                        pieSliceText='label',
                        pieHole=0.5),
                      chartid="doughnut")
print(doughnut, "chart")
```

------
## Page 2


```{r echo = FALSE, fig.align="center"}
plot(1:10, 1:10)
```

Answer 1

The gvisPieChart() function does not create an image, so fig.align will not work. You need to add code to center the javascript.

The easiest way to do this is:

cat("<center>")
print(doughnut, "chart")
cat("</center>")

Using <center> is not very good coding (in the HTML world), but it is quick and should work for what you are trying to do.

EDIT (tyler rinker)

For me this worked.

I added:

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

To my style.css and then wrapped the code chunk with <img class="center"></img>