uni-app rict-text组件 在nvue页面中运行在手机上 img与span元素混排时 img设置vertical-align:middle; 无法与同行文字垂直居中对齐

uni-app rict-text组件 在nvue页面中运行在手机上 img与span元素混排时 img设置vertical-align:middle; 无法与同行文字垂直居中对齐

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 Windows 10 专业版 20H2
HBuilderX类型 正式
HBuilderX版本号 3.2.3
手机系统 Android
手机版本号 Android 11
手机厂商 小米
手机机型 Redmi K30 Ultra
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • 下载附件，运行到手机上

预期结果：

  • 图片与同行文字垂直居中对齐，文字背景显示

实际结果：

  • 图片偏上，文字居中，文字背景未显示

bug描述：

rict-text组件 img与span元素混排 img设置vertical-align:middle; 无法与同行文字垂直居中对齐
浏览器中显示正常，但是在nvue页面中背景颜色与垂直居中都无效
这里是我用普通网页展示的效果：https://codepen.io/yatoku/pen/wveeqow

rich-text-bug.zip


更多关于uni-app rict-text组件 在nvue页面中运行在手机上 img与span元素混排时 img设置vertical-align:middle; 无法与同行文字垂直居中对齐的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

请使用flex布局试试

更多关于uni-app rict-text组件 在nvue页面中运行在手机上 img与span元素混排时 img设置vertical-align:middle; 无法与同行文字垂直居中对齐的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的 我这边试试

可是设置成flex的话 文本就不能混排了。

回复 yato: 你好，请问，这个问题你找到解决方法了么？

在 nvue 页面中，rich-text 组件渲染富文本时，对 CSS 的支持确实与 WebView 存在差异。你遇到的问题主要是 vertical-align: middle; 在 nvue 的 rich-text 中未能按预期工作，同时 span 的背景色也未显示。

原因分析：

  1. vertical-align 支持度问题：nvue 的 rich-text 组件基于原生渲染，对 CSS 属性的支持有限。vertical-align 在原生环境中可能不被完全支持，尤其是在图文混排的场景下，这会导致图片与文字无法垂直居中对齐。
  2. 背景色渲染问题：span 元素的背景色在 nvue 的 rich-text 中可能被忽略，因为原生渲染引擎对行内元素的背景支持较弱。

解决方案：

  1. 使用 flex 布局替代：如果内容结构允许，可以考虑将图文混排的部分用 view 包裹，并使用 flex 布局实现垂直居中。例如：

    <view style="flex-direction: row; align-items: center;">
  <image src="..." style="width: 20px; height: 20px;"></image>
  <text style="margin-left: 5px;">文字内容</text>
</view>

    这种方式虽然需要调整结构，但能更稳定地实现垂直对齐。

  2. 调整图片样式：尝试为 img 添加 display: block; 或 display: inline-block;，并配合 margin 手动调整位置。例如：

    img {
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px; /* 根据实际情况调整 */
}
回到顶部