Html 如何使用文本按钮创建图像

我正在使用froala自定义编辑器，希望能够创建一个自定义菜单项，其中包含字体和图像。编辑器允许用户指定和注册自定义模板。下面是一个模板示例

FroalaEditor.ICON_TEMPLATES = {
  font_awesome: '<i class="fa fa-[NAME]" aria-hidden="true"></i>,',
  font_awesome_5: '<i class="fas fa-[FA5NAME]" aria-hidden="true"></i>',
  font_awesome_5s: '<i class="far fa-[FA5NAME]" aria-hidden="true"></i>',
  text: '<span style="text-align: center;">[NAME]</span>',
  image: '<img src=[SRC] alt=[ALT] />',
  svg: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">[PATH]</svg>'
}

FroalaEditor.ICON\u模板={
字体：'，'，
字体5:''，
字体_awesome_5s:''，
文本：“[名称]”，
图像：“”，
svg:“[PATH]”
}

所以我想做的是创建一个模板，将文本和图像结合起来，就像

<span style="text-align: center;">[NAME]</span><img src=[SRC] alt=[ALT] />

[名称]

但是，上面没有像图像那样创建期望的输出，而文本不在中间。我怎样才能得到第一个文本，然后是一个空间，然后图像就在中间，就像文本一样？