uni-app nvue页面rich-text组件img和文字对不齐

ios表现截图下上传附件，请提供简单可复现的完整示例（上传附件），方便我们快速排查问题哦。 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

测试源码和测试效果附件已上传

在 uni-app 的 nvue 页面中，使用 rich-text 组件时，img 和文字可能会出现对齐问题。这通常是由于 img 标签的默认样式与文字的行高不一致导致的。以下是一些常见的解决方案：

1. 使用 vertical-align 属性

可以通过设置 img 标签的 vertical-align 属性来调整图片与文字的对齐方式。例如：

<rich-text :nodes="htmlContent"></rich-text>

export default {
  data() {
    return {
      htmlContent: `
        <p>
          <img src="https://example.com/image.png" style="vertical-align: middle;" />
          This is some text.
        </p>
      `
    };
  }
};

vertical-align 的常见值包括：

• baseline：默认值，图片的基线与文字的基线对齐。
• middle：图片的中线与文字的中线对齐。
• bottom：图片的底部与文字的底部对齐。
• top：图片的顶部与文字的顶部对齐。

2. 调整 img 的 height 和 width

确保 img 的 height 和 width 设置合理，避免图片过大或过小导致对齐问题。

<rich-text :nodes="htmlContent"></rich-text>

export default {
  data() {
    return {
      htmlContent: `
        <p>
          <img src="https://example.com/image.png" style="width: 20px; height: 20px; vertical-align: middle;" />
          This is some text.
        </p>
      `
    };
  }
};

3. 使用 line-height 调整文字行高

如果文字的行高与图片的高度不一致，可以通过调整 line-height 来使它们对齐。

<rich-text :nodes="htmlContent"></rich-text>

export default {
  data() {
    return {
      htmlContent: `
        <p style="line-height: 20px;">
          <img src="https://example.com/image.png" style="width: 20px; height: 20px; vertical-align: middle;" />
          This is some text.
        </p>
      `
    };
  }
};

4. 使用 flex 布局

如果 rich-text 组件支持 flex 布局，可以尝试使用 flex 来对齐图片和文字。

<view class="container">
  <image src="https://example.com/image.png" class="image"></image>
  <text class="text">This is some text.</text>
</view>

.container {
  display: flex;
  align-items: center;
}

.image {
  width: 20px;
  height: 20px;
}

.text {
  margin-left: 10px;
}

5. 使用 span 包裹文字

有时将文字包裹在 span 标签中，并设置 span 的样式，可以更好地控制对齐。

<rich-text :nodes="htmlContent"></rich-text>

export default {
  data() {
    return {
      htmlContent: `
        <p>
          <img src="https://example.com/image.png" style="vertical-align: middle;" />
          <span style="vertical-align: middle;">This is some text.</span>
        </p>
      `
    };
  }
};

6. 使用 uni-app 的 nvue 特定样式

nvue 页面的样式与普通 vue 页面有所不同，可能需要使用 nvue 特定的样式属性来调整对齐。

<rich-text :nodes="htmlContent"></rich-text>

export default {
  data() {
    return {
      htmlContent: `
        <p>
          <img src="https://example.com/image.png" style="nv-vertical-align: middle;" />
          This is some text.
        </p>
      `
    };
  }
};