用“ fig.align”对齐多个图形

编程问答 2022-08-12

问题描述

我有多个数字是从单个代码块输出的。目的是使它们在页面中央居中显示。到目前为止，我一直无法做到这一点。这些示例here的渲染版本来自this source document。

该第一块将两个图像并排放置，并在页面上左对齐。该代码将生成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'。该中心使图形对齐，但现在它们不再并排。在HTML输出中，我们看到style="display: block; margin: auto;"已添加到<img>标记中。

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

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

```{r test3,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,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,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,fig.cap='A test caption.'}
knitr::include_graphics(rep('https://bookdown.org/yihui/bookdown/images/knit-logo.png',2))
```

解决方法

如果在块app/xyz.cfg中省略块选项fig.cap，即，封闭test3的CSS属性text-align: center中的

knitr不会使图像居中于同一行最终的HTML输出中缺少该元素。

一种补救措施是添加<div>（必须为空白，而不是空字符串！）。请注意，这还会在图像下方添加一个空的fig.cap = ' '元素（用于标题），这会导致一些额外的空白。

bookdownknitrr-markdown