如何在MkDocs Material主题中添加自定义内联样式

先直接明确回答你的两个问题：

• 样式应该创建在哪里？
  没错，你的自定义样式就应该放在你在YAML配置文件中通过extra_css字段声明的那个（或那些）自定义CSS文件里。静态站点生成器（比如MkDocs、Jekyll这类工具）会自动把这些CSS文件引入到最终生成的HTML页面中，确保样式能生效。

• 是不是yml中声明的自定义CSS文件？
  完全正确。extra_css的作用就是告诉生成器：“我有额外的自定义样式文件，帮我把它加到页面里”——所以所有你想全局应用或者复用的样式，都应该写在这个文件里。

针对你提到的图片居中问题补充说明 #

你之前配置的全局图片居中样式会影响所有图片，如果你想更精准地控制特定图片的样式，可以这样做：

1. 在你的自定义CSS文件里定义一个类：

.centered-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* 还可以添加其他样式，比如max-width: 100%; 限制图片宽度 */
}

2. 在Markdown中给需要居中的图片添加这个类：

![示例图片](path/to/your/image.jpg){: .centered-image }

这样就只会给这个特定的图片应用居中样式，而不会影响所有图片。

另外，如果只是偶尔给单个元素加临时样式，也可以直接用内联属性语法，比如：

![临时居中图片](path/to/image.jpg){: style="display:block; margin:0 auto;" }

但这种方式只适合临时需求，复用性差，还是建议把常用样式写到CSS文件里统一维护。

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