vue-quill-editor 富文本编辑中，【标题】的样式 hardcode

场景：前端 vue 开发过程中，vue-quill-editor 组件实现富文本编辑是，客户想要把 【标题一、标题二、... 标题六、文本】设置成固定的样式，实现一键继承样式；

如图所示：

 

 实现：

看起来很简单，可能只需要前端同学把 h1-h6、p 标签的样式在前端代码中修改即可，

但是当时遇到一个问题，标题一和标题三有背景色并且居中，因为 H 标签属于块级元素，加上背景色并且居中的话，代码如下：

.ns-richtext .ql-editor h1 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background: #3d1466;
  text-align: center;
}

.ns-richtext .ql-editor h3 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background: #a10000;
  text-align: center;
}

效果如图：

 

 效果显然很丑陋， 哈哈哈。。。
最后的实现方式：

给 h1、h3 标签添加了以下样式：

width: fit-content;
margin: 0 auto;