Search code examples
htmlr-markdownmultiple-columnsvertical-alignmentfigure

Vertical top align figures of different height in Rmarkdown

I have an Rmarkdown code chunk where I want to display two external figures of different heights, and have them aligned vertically at the top. I am outputting an HTML document.

Here is the code

```{r, fig.show='hold', out.width="25%"}
include_graphics("leftfig.png")
include_graphics("rightfig.png")

This produces middle-aligned side-by-side plots (not the actual images, just used as an example).

enter image description here

However, I want these two figures top-aligned. I have tried various combinations of chunk options but I don't find fig.align options related to vertical alignment, nor do I see options for the YAML header that manages this.

Any help would be greatly appreciated.

Solution

  • A quick workaround with CSS (applied to the entire document):

    ---
title: "Test"
output: html_document
---

```{css}
img {vertical-align: top;}
```

```{r, fig.show='hold', out.width='25%'}
knitr::include_graphics("leftfig.png")
knitr::include_graphics("rightfig.png")
```