innerHTML内嵌文字图片

最新推荐文章于 2024-08-17 09:09:55 发布

远行MM

最新推荐文章于 2024-08-17 09:09:55 发布

阅读量3k

点赞数

分类专栏： layabox

本文链接：https://blog.csdn.net/qq_22794043/article/details/101012022

版权

本文介绍了在处理一行文字中嵌入图片并保持整体居中的需求时，如何利用HTMLDivElement实现自适应居中。起初采用像素级坐标计算，但后来通过Laya的HTMLDivElement避免了繁琐的定位。然而，遇到图片因透明区域被裁剪导致尺寸不准确的问题，通过计算非透明区域尺寸并调整代码尺寸设置解决了问题。此外，为确保图片在混排中上下居中，添加了`valign="middle"`属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经常遇到这种需求（策划特别喜欢），一行文字中间需要嵌入图片，但是这行包括图片的文字又需要根据文字长度或者图片宽度自适应居中。

比较原始的方法是每种情况都放进去试下，量坐标，然后写if条件进行判断，不同条件设置不同的坐标实现居中。

后来发现LAYA提供的HTMLDivElement支持同时包含文字和图片，引擎在渲染时，如果是文字，则会用HTMLElement进行渲染，如果是图片，则会用HTMLImageElement进行渲染。

于是很轻松地就借助引擎实现了整行自适应居中，从苦逼的像素级坐标计算中解放出来了。

代码如下

var html:HTMLDivElement = new HTMLDivElement();
var url:String = "icon.png";
var str:String = "文本内容1" + "<img src = '" + url + "' style = 'width:28;height:28' ">"+"文本内容2";
html.style.align  = "center";
html.style.fontSize = 20;
html.innerHTML = str;

这里可以任意设置字体大小和图片大小，最后引擎会自动实现图文整体上下居中，完美。

但是后来再次使用此方法实现居中的时候，发现图片变形了，用UI编辑器给UI添加相同的图片，想同的尺寸，用HTMLDivElement

new出来的宽高要小一些。

查看引擎源码发现H