Can you top align a plot or image in R Markdown's flexdashboard?

Question

---
title: "How do you top align this figure below?"
output: flexdashboard::flex_dashboard
---
    
```{r c1, fig.width=9}
plot(mtcars)
```

The R flexdashboard code above generates a plot that is centered vertically when I maximize my dashboard window. It looks like this.

Instead, I want the image to be vertically top aligned, with no white space above the image. It would look like the image below, with any spare white space placed below the image (should your window be maximized). If your output doesn't quite match mine just resize your output window to be tall and thin (think of rotated "coding" monitors).

The R Markdown argument fig.align only has horizontal options (left, right, center) and the flexdashboard argument .no-padding doesn't seem to help.

How do I get flexdashboard to top align within R Markdown?

Answer 1

You could use css to override the background position of the image.

---
title: "Flex"
author: ""
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    css: styles.css
---

Page One
=======================================================================
    
Row
-----------------------------------------------------------------------
    
### chart1
    
    
```{r, fig.width=12}
  plot(mtcars)
```

styles.css (in same working directory):

.image-container {
  background-position: center top !important;
}