Figures not centered in the PDF report generated by pagedown (R)

Question

I'm trying to generate a PDF report using pagedown. The generated report has images that are not in the center of the page. Here's the RMD document:

---
title: "`r params$name`"
author: "`r params$school`"
date: "`r Sys.Date()`"
params:
  name: "XYZ"
  school: "ABC School"
output:
  pagedown::html_paged:
    css: style.css
knit: pagedown::chrome_print
---

knitr::opts_chunk$set(echo = TRUE)


packages <- c("tidyverse")
#lapply(packages, install.packages, character.only = TRUE) 
lapply(packages, library, character.only = TRUE) 

anxiety_value <- 12
min_score_anxiety <- 7
max_score_anxiety <- 35

basic_seq <- seq(min_score_anxiety, max_score_anxiety, by = 4)
final_seq <- unique(c(basic_seq, anxiety_value, max_score_anxiety))
final_seq <- sort(final_seq)



data.frame(min = min_score_anxiety, value = anxiety_value, max = max_score_anxiety) |>
  ggplot(aes(y = 1)) +
  geom_linerange(aes(xmin = min, xmax = max), lwd = 100, color = "salmon") +
  geom_vline(aes(xintercept = value), lwd = 10, alpha = 0.5) +
  coord_cartesian(ylim = c(0, 2), expand = FALSE) +
  scale_x_continuous(breaks = final_seq) +
  ggtitle(paste("Anxiety Score for", params$name)) +
  labs(y = "") + 
  theme_void(base_size = 25) +
  #theme_Publication() + 
  theme(aspect.ratio = 1/5,
        axis.ticks.x = element_line(),
        axis.ticks.length.x = unit(5, "mm"),
        axis.text.x = element_text(),
        axis.line.x = element_line(),
        axis.line.y = element_blank(),
        axis.text.y = element_blank(),
        axis.ticks.y = element_blank(), 
        plot.title = element_text(hjust = 0.5, margin = margin(20, 20, 20, 20)),
        plot.margin = margin(20, 20, 20, 20))

Here's the style.css:

@page {
  size: letter;
  margin: 1in;
  background-color: papayawhip;

  @bottom-left-corner {
    content: ""; 
    background-color: black;
    height: 10px;  
    padding: 50px;  
  }

  @bottom-center {
    content: ""; 
    background-color: black;    
  }
  
  @bottom-right-corner {
    background-color: black;    
    content: counter(page);
    color: whitesmoke;
    font-size: 20pt;
  }
}

@page:first{
  background-color: #ffffff;
  background-image: url(Women_Cover_Page.png);
  background-size: cover;
  background-repeat: no-repeat;

  @top-left-corner {
    display: none;
  }

  @top-left {
    display: none;
  }

  @top-center {
    display: none;
  }

  @top-right {
    display: none;
  }

  @top-right-corner {
    display: none;
  }

  @bottom-right {
    display: none;
  }

  @bottom-left-corner {
    display: none;  
  }

  @bottom-left {
    display: none;
  }  

  @bottom-center {
    display: none;    
  }
  
  @bottom-right {
    display: none;    
  }

  @bottom-right-corner {
    display: none;
  }

}

/* img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */


:root {
  --background: papayawhip, whitesmoke;
  --pagedjs-width: 210mm;
  --pagedjs-height: 297mm;
  --color-paper: white;
  --color-mbox: rgba(0, 0, 0, 0.2);
  --running-title-width: 2.5in;
  --screen-pages-spacing: 3mm;
  --main-color: rgb(114, 76, 37);
  --secondary-color: #346aa0;
  --main-font: "Roca Two";
  --header-font: "Lato","Inter";
}

p, ul, a, ol {
  font-family: var(--main-font);
}

p {
  font-size: 18pt;
}

h1, h2, h3, h4 {
  font-family: var(--header-font);
}

h1 {
  font-size: 36pt;
  color: #093757;
  text-align: left;
  background-repeat: no-repeat, no-repeat;
  background-position: 5% 40%, 95% 40%;
  background-size:  5cm, 5cm;
  
}

h1.title {
  font-size: 36pt;
  font-family: Roca Two, Alta, sans-serif;
  font-style: bold;
  top: 90px;
  left: 80px;
  margin-left: 2%;
  margin-top: 30%;
  font-weight: 900;
  padding-bottom: 0;
  padding-top: 0;
  background: transparent;
}


h2 {
  font-size: 24pt;
  font-family: Roca Two, Alta, sans-serif;
  font-style: bold;
  margin-left: -2%;
  background: transparent;
}

h2.title {
  font-size: 24pt;
  font-family: Roca Two, Alta, sans-serif;
  font-style: bold;
  background: transparent;
}

Output (only pasting the graph)

I've tried the following things:

• fig.align attribute does nothing. I've used "left" but the figures stayed the same.

• I've decreased the margins in the .css file which shifts image a bit to the left but I just want the image to be centered. I.e., the padding should be same on the left and the right. Not sure how to do that.

Answer 1

I was able to fix this issue by using css.

img {
  width: 100%;
}

Fixed the issue.