Reputation: 2843
I have multiple figures that are output from a single code chunk. The goal is to have them appear next to each other, centered on the page. So far, I have been unable to make this happen. There is a rendered version of these examples here, which comes from this source document.
This first chunk places two images side-by-side and left-aligned on the page. The code results in 2 <img>
tags without anything special, other than the specified width.
```{r test1, out.width='32.8%', fig.show='hold'}
knitr::include_graphics(rep('images/knit-logo.png', 2))
```
<img src="images/knit-logo.png" width="32.8%" />
<img src="images/knit-logo.png" width="32.8%" />
Now say I want the figures centered. So perhaps I try setting fig.align='center'
. This center aligns the figures, but now they are no longer side-by-side. In the HTML output, we see that style="display: block; margin: auto;"
has been added to the <img>
tag.
```{r test2, out.width='32.8%', fig.show='hold', fig.align='center'}
knitr::include_graphics(rep('images/knit-logo.png', 2))
```
<img src="images/knit-logo.png" width="32.8%" style="display: block; margin: auto;" />
<img src="images/knit-logo.png" width="32.8%" style="display: block; margin: auto;" />
Now if I add a figure caption, the images are side-by-side again and centered. In the HTML, we can see that using a fig.cap
places the images inside a <div>
. The div
is centered, but there is no "block" display that keeps the images from appearing on the same line.
```{r test3, out.width='32.8%', fig.show='hold', fig.align='center', fig.cap='A test caption.'}
knitr::include_graphics(rep('images/knit-logo.png', 2))
```
<div class="figure" style="text-align: center">
<img src="images/knit-logo.png" alt="A test caption." width="32.8%" />
<img src="images/knit-logo.png" alt="A test caption." width="32.8%" />
<p class="caption">(\#fig:test3-display)A test caption.</p>
</div>
Is there a way to place multiple figures into a <div class="figure" style="text-align: center">
without specifying a figure caption? It seems like there should be a way to do this, but I haven't found any solutions so far. Ultimately the goal is to have the third set of output (rendered version here) but without the caption.
In addition to the linked GitHub repo and rendered site, here's a minimal standalone Rmd file that replicates the issue:
---
title: "Align multiple figures with `fig.align`"
output: bookdown::html_document2
---
I have multiple figures that are output from a single code chunk. The goal is to
have them appear next to each other, centered on the page. So far, I have been
unable to make this happen. Here are some examples:
This first chunk places two images side-by-side and left-aligned on the page.
The code results in 2 `<img>` tags without anything special, other than the
specified width.
```{r test1, out.width='32.8%', fig.show='hold'}
knitr::include_graphics(rep('https://bookdown.org/yihui/bookdown/images/knit-logo.png', 2))
```
Now say I want the figures centered. So perhaps I try setting
`fig.align='center'`. This center aligns the figures, but now they are no longer
side-by-side. In the HTML output, we see that
`style="display: block; margin: auto;"` has been added to the `<img>` tag.
```{r test2, out.width='32.8%', fig.show='hold', fig.align='center'}
knitr::include_graphics(rep('https://bookdown.org/yihui/bookdown/images/knit-logo.png', 2))
```
Now if I add a figure caption, the images are side-by-side again and centered.
In the HTML, we can see that using a `fig.cap` places the images inside a
`<div>`. The `div` is centered, but there is no "block" display that keeps the
images from appearing on the same line.
```{r test3, out.width='32.8%', fig.show='hold', fig.align='center', fig.cap='A test caption.'}
knitr::include_graphics(rep('https://bookdown.org/yihui/bookdown/images/knit-logo.png', 2))
```
Upvotes: 2
Views: 1318
Reputation: 9668
knitr does not center the images on the same line if you omit the chunk option fig.cap
in chunk test3
, i.e., the CSS attribute text-align: center
of the enclosing <div>
element is missing in the final HTML output.
A remedy is to add fig.cap = ' '
(must be a blank, not an empty string!). Note that this also adds an empty <p>
element (for the caption) below the images which results in some additional whitespace.
Upvotes: 1