将多个数字与“fig.align”对齐

Question

我有多个图形是从单个代码块输出的。目标是让它们并排出现在页面的中心。到目前为止，我一直无法做到这一点。这些示例有一个渲染版本 here, which comes from this source document.

第一个块在页面上放置了两个图像 side-by-side 和 left-aligned。该代码生成 2 <img> 个标签，除了指定的宽度外没有任何特殊内容。

```{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%" />

现在假设我想让数字居中。所以也许我尝试设置 fig.align='center'。这个中心对齐数字，但现在它们不再是side-by-side。在 HTML 输出中，我们看到 style="display: block; margin: auto;" 已添加到 <img> 标签。

```{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;" />

现在，如果我添加图形标题，图像将再次 side-by-side 并居中。在 HTML 中，我们可以看到使用 fig.cap 将图像放在 <div> 中。 div 居中，但没有阻止图像出现在同一行的“块”显示。

```{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>

有没有办法在不指定图形标题的情况下将多个图形放入 <div class="figure" style="text-align: center">？看起来应该有办法做到这一点，但到目前为止我还没有找到任何解决方案。最终目标是获得第三组输出（渲染版本 here）但没有标题。

除了链接的 GitHub 存储库和呈现的站点之外，这里还有一个最小的独立 Rmd 文件，它复制了这个问题：

---
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))
```

Answer 1

如果您在块 test3 中省略块选项 fig.cap，即 CSS 属性 text-align: center，则 knitr 不会将图像居中放置在同一行上最终 HTML 输出中缺少包含 <div> 的元素。

补救办法是加上fig.cap = ' '（必须是空格，不能是空串！）。请注意，这还会在图像下方添加一个空的 <p> 元素（用于标题），从而导致一些额外的空白。

将多个数字与“fig.align”对齐

align multiple figures with `fig.align`

knitr

r-markdown

bookdown