-- 创造无限可能

css:图标和文字在一个盒子内居中显示

2023-09-27 10:51:14
1512 人浏览 0 人点赞
有用,点赞支持一下

问题:图标和文字在一个盒子内居中显示。

在小程序中,可以使用flex布局将图标和文字放在一个盒子中,并使它们居中显示。首先,将图标和文字放在一个view组件内,然后使用flex布局的相关属性实现居中对齐。可以通过设置view组件的display属性为flex,然后设置justify-content和align-items属性为center,将图标和文字水平和垂直居中显示。

示例:

<view style="display: flex; justify-content: center; align-items: center;">
  <u-icon name="scan" color="#fff" size="50"></u-icon>
  <text>文字内容</text>
</view>