uni-app nvue页面rich-text组件img和文字对不齐问题，请处理
uni-app nvue页面rich-text组件img和文字对不齐问题，请处理
示例代码：
<template>
<view class="content">
<text style="margin-bottom: 20px;margin-top: 20px;">测试1：</text>
<rich-text :nodes="nodes"></rich-text>
<text style="margin-bottom: 20px;margin-top: 20px;">测试2：</text>
<rich-text :nodes="nodes1"></rich-text>
</view>
</template>
<script>
export default {
data() {
return {
nodes: [
{
name: 'img',
attrs: {
width:'40rpx',
height: '40rpx',
src: "/static/0.png",
}
},
{
name: 'img',
attrs: {
width:'40rpx',
height: '40rpx',
src: "/static/0.png"
}
},
],
nodes1: [
{
name: 'text',
text:'尽快解决哈,感谢你,这里偏上对不齐'
},
{
name: 'img',
attrs: {
width:'40rpx',
height: '40rpx',
src: "/static/0.png",
}
},
{
name: 'img',
attrs: {
width:'40rpx',
height: '40rpx',
src: "/static/0.png"
}
},
],
}
},
onLoad() {
},
methods: {
}
}
</script>操作步骤：
<template>
<view class="content">
<text style="margin-bottom: 20px;margin-top: 20px;">测试1：</text>
<rich-text :nodes="nodes"></rich-text>
<text style="margin-bottom: 20px;margin-top: 20px;">测试2：</text>
<rich-text :nodes="nodes1"></rich-text>
</view>
</template>
<script>
export default {
data() {
return {
nodes: [
{
name: 'img',
attrs: {
width:'40rpx',
height: '40rpx',
src: "/static/0.png",
}
},
{
name: 'img',
attrs: {
width:'40rpx',
height: '40rpx',
src: "/static/0.png"
}
},
],
nodes1: [
{
name: 'text',
text:'尽快解决哈,感谢你,这里偏上对不齐'
},
{
name: 'img',
attrs: {
width:'40rpx',
height: '40rpx',
src: "/static/0.png",
}
},
{
name: 'img',
attrs: {
width:'40rpx',
height: '40rpx',
src: "/static/0.png"
}
},
],
}
},
onLoad() {
},
methods: {
}
}
</script>预期结果：
正常显示
实际结果：
图片偏上
bug描述：
安卓表情是偏上移，全部为表情时只能显示一半，图文组合是可以显示全部图片，但是还是偏上，修改样式也不生效！
ios效果稍好，也有稍微上移
6 回复
尝试用 align-items: center;一下如果解决不了的话 尝试使用调试工具 查看图片所占高度 是不是比 图片实际高度要高 如果是的话 尝试给图片加上样式 font-size:0;
在 uni-app 的 nvue 页面中，使用 rich-text 组件时，可能会遇到 img 标签和文字对不齐的问题。这通常是由于 img 标签的默认样式与文字的基线对齐方式不一致导致的。以下是一些常见的解决方法：
1. 使用 vertical-align 样式
通过设置 img 标签的 vertical-align 属性，可以调整图片与文字的对齐方式。常见的值包括 middle、top、bottom 等。
<rich-text :nodes="htmlContent"></rich-text>export default {
data() {
return {
htmlContent: `
<div>
<img src="https://example.com/image.png" style="vertical-align: middle;" />
<span>这是一段文字</span>
</div>
`
};
}
};2. 使用 flex 布局
将 img 和文字包裹在一个 div 中，并使用 flex 布局来对齐它们。
<rich-text :nodes="htmlContent"></rich-text>export default {
data() {
return {
htmlContent: `
<div style="display: flex; align-items: center;">
<img src="https://example.com/image.png" />
<span>这是一段文字</span>
</div>
`
};
}
};3. 调整 img 的 margin 或 padding
通过调整 img 标签的 margin 或 padding，可以微调图片与文字的对齐。
<rich-text :nodes="htmlContent"></rich-text>export default {
data() {
return {
htmlContent: `
<div>
<img src="https://example.com/image.png" style="margin-bottom: 5px;" />
<span>这是一段文字</span>
</div>
`
};
}
};4. 使用 line-height 调整文字行高
通过调整文字的行高，可以使文字与图片对齐。
<rich-text :nodes="htmlContent"></rich-text>export default {
data() {
return {
htmlContent: `
<div>
<img src="https://example.com/image.png" />
<span style="line-height: 24px;">这是一段文字</span>
</div>
`
};
}
};5. 使用 position 定位
如果以上方法都无法满足需求，可以尝试使用 position 定位来精确控制图片和文字的位置。
<rich-text :nodes="htmlContent"></rich-text>export default {
data() {
return {
htmlContent: `
<div style="position: relative;">
<img src="https://example.com/image.png" style="position: absolute; top: 0; left: 0;" />
<span style="position: absolute; top: 0; left: 50px;">这是一段文字</span>
</div>
`
};
}
};