LayaBox:富文本HtmlDivElement垂直水平居中

注意:目前不支持文本的垂直居中对齐


示例:文本垂直水平居中(文本的垂直居中使用padding替代设置)

 Laya.init(600, 400, WebGL);
 var html3: Laya.HTMLDivElement = new Laya.HTMLDivElement();
 html3.style.height = 300;
 html3.style.width = 300;
 html3.style.color = "#ffffff";
 html3.style.borderColor = "red";
 //水平居中 
 html3.style.align = "center";            
 html3.innerHTML = '<font>测试水平垂直居中对齐</font>';
 //垂直居中
 html3.style.padding = [(html3.height - html3.contextHeight) / 2, 0, 0, 0];
 Laya.stage.addChild(html3);
垂直水平居中效果.png

重点解析:

 html3.height : 富文本高度
 html3.contextHeight : 富文本的内容实际高度
 padding=[x,x,x,x] : 上 右 下 左 

注意:上面的方法适合已经知道富文本的高度的情况下


不知道富文本的高度情况下:
场景:图片和文本垂直居中
方法:文本y值=(获取图片高度 - 获取文本高度)/ 2
(注意点:图片的y值,在适当的时候也需要加入计算)

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容