在微信小程序中怎样让文字放在图片下面

 时间:2024-11-08 21:46:15

在微信小程序的制作中,我们经常使用文字和图片混合的排布方式,那么如果想要让文字放在兔脒巛钒图片下面怎么办呢?我们可以通过改变图片和文字的父元素的宽和高来实现,下面来看详细的教程!

在微信小程序中怎样让文字放在图片下面

工具/原料

微信小程序:1.02

微信开发者工具:1.02

操作系统:windows

方法/步骤

1、首先我们打开微信开发者工具。

在微信小程序中怎样让文字放在图片下面

2、然后打开一个wxml文件。

在微信小程序中怎样让文字放在图片下面

3、在wxml文件中使用image标签插入一张图片。

在微信小程序中怎样让文字放在图片下面

4、写一段文字,跟图片一起同时放在父元素main-memu里面。

在微信小程序中怎样让文字放在图片下面

5、然后打开wxss文件。

在微信小程序中怎样让文字放在图片下面

6、在wxss文件里面,为图片和文本的父元素main-memu设置宽和高。

在微信小程序中怎样让文字放在图片下面

7、设置完宽和高之后,通过text-align:center让文本居中显示!

在微信小程序中怎样让文字放在图片下面

8、打开模拟器查看效果!

在微信小程序中怎样让文字放在图片下面

html如何把两个网页连接起来 justify-content是什么意思? HTML怎么添加滚动条 微信小程序居中怎么设置 如何给body设置背景图
热门搜索
香菇图片 没有心跳的少女 符咒图片 理想one汽车报价及图片 鸡宝图片和价格