如何调整Quarto中标题横幅（title-block-banner）的宽度？

要修改title-block-banner的宽度，你需要通过自定义CSS覆盖默认样式，具体实现方式如下：

方法1：内嵌CSS样式块 #

直接在QMD文档中添加<style>标签，指定横幅的最大宽度并设置居中：

---
title: "Cars"
title-block-banner: true
format: 
  html:
    code-fold: true
    page-layout: full
    fig_caption: yes
---

<style>
.quarto-title-block .banner {
  max-width: 800px; /* 替换为你需要的横幅宽度 */
  margin: 0 auto;   /* 让横幅在页面水平居中 */
}
</style>

::: panel-tabset 
## MTCars

```{r}
head(mtcars)

Cars #

head(cars)

:::

## 方法2：外部CSS文件复用样式
如果需要在多个文档中统一使用该样式，可创建一个外部CSS文件（例如`custom.css`），写入以下规则：

```css
.quarto-title-block .banner {
  max-width: 800px;
  margin: 0 auto;
}

然后在QMD的YAML配置中引用这个CSS文件：

---
title: "Cars"
title-block-banner: true
format: 
  html:
    code-fold: true
    page-layout: full
    fig_caption: yes
    css: custom.css
---

关键属性说明 #

• max-width：控制横幅的最大宽度，支持固定像素值（如700px）或百分比（如85%），按需调整即可。
• margin: 0 auto：确保调整宽度后的横幅保持水平居中，避免出现靠左对齐的视觉问题。

内容的提问来源于stack exchange，提问作者apprunner2186