美文网首页
Unity Image 和 Text 水平居中的处理

Unity Image 和 Text 水平居中的处理

作者: 好大一棵树6 | 来源:发表于2023-04-16 12:18 被阅读0次

一、图片在左

图片在左.gif

1、创建一个这样的层级结构


image.png

BgImage:白色背景
Text:文字
Icon:钻石 Icon
2、设置
1)、获取 Icon 的宽度,我这里是width = 40


image.png

2)

  • 设置Text 的 PosX :width/2 = 20(为 Icon 宽度的一半)
  • 添加组件 ContentSizeFitter 并设置 Horizontal Fit 为 Preferred Size
  • 添加组件 Horizontal Layout Group,设置Pading->Left :width = -40 (Icon 的宽度);
    设置Child Alignment:Middle Left
image.png

二、图片在右


图片在右.gif

和 图片在做的类似处理

image.png

相关文章

  • 浮动与定位02

    水平居中与垂直居中 水平居中 text-align:center 单行文本居中 单行文本和a链接 padding:...

  • css 常见的元素居中方式

    元素居中分为水平居中和垂直居中两种。 一、水平居中 text-align .container {text-ali...

  • 【自定义View学习笔记】Canvas:DrawText,文本居

    【1】Text水平居中Text水平居中:(View的宽度-Text宽度)/2 就是Text绘制的起始点X。重点:T...

  • 如何居中一个元素(终结版)

    一、水平居中。水平居中还是很好处理的。1.行内元素。直接使用text-align: center (注意只能用于行...

  • css居中方式总结(亲测有效)

    水平居中(行内元素水平居中、块级元素水平居中) 垂直居中 水平垂直居中 行内元素水平居中 text-align: ...

  • css实现元素居中

    水平居中 行内水平居中 行内水平居中就直接用text-align: center 块级水平居中 直接用margin...

  • 对!就是css 居中

    一、水平居中 1、水平居中 text-align: center; 在父元素上设置 text-align: cen...

  • css分享

    一、水平垂直居中: 1、水平居中: ① text-align:center若是行内元素, 给其父元素设置 text...

  • CSS垂直居中总结

    使块级元素里面的文本水平居中,在此块级元素添加text-align: center;即可实现。image.png ...

  • 元素居中

    水平居中 text-align 在父元素上设置text-align: center 使文字/图片水平居中。 mar...

网友评论

      本文标题:Unity Image 和 Text 水平居中的处理

      本文链接:https://www.haomeiwen.com/subject/spvfjdtx.html