如何将Action Text文本区域中的图片居中显示？

方法一：全局CSS强制图片居中 #

Action Text渲染的内容会包裹在.trix-content容器里，直接通过CSS设置图片的外边距，就能让所有图片默认居中：

.trix-content img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

把这段代码添加到你的项目样式文件（比如app/assets/stylesheets/application.tailwind.css或app/assets/stylesheets/application.css）中即可生效。

方法二：给编辑器添加居中对齐按钮（支持手动切换） #

如果需要让用户自主选择图片是否居中，可以自定义Action Text的工具栏，添加居中对齐按钮：

1. 添加JavaScript代码（可放在app/javascript/controllers/action_text_controller.js或application.js）：

document.addEventListener('trix-initialize', (event) => {
  const editor = event.target.editor;
  const toolbarGroup = editor.toolbarElement.querySelector('.trix-button-group--block-tools');
  
  // 避免重复添加按钮
  if (!toolbarGroup.querySelector('[data-trix-action="alignCenter"]')) {
    const centerBtn = document.createElement('button');
    centerBtn.type = 'button';
    centerBtn.dataset.trixAction = 'alignCenter';
    centerBtn.title = '居中对齐';
    centerBtn.textContent = '居中';
    
    centerBtn.addEventListener('click', () => {
      editor.activateAttribute('align', 'center');
    });
    
    toolbarGroup.appendChild(centerBtn);
  }
});

2. 配套添加CSS样式：

.trix-content [align=center] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

这样用户在编辑时，点击新增的「居中」按钮，就能将选中的图片（或其他块元素）设置为居中显示。

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