下载掌阅APP，畅读海量书库
立即打开
完成文本添加，设置文本样式，实现文本与图片居中显示的功能。
1）在指定的位置显示文本。
2）修改文本样式，实现文本block显示。
3）实现文本与图片居中显示。
1 打开微信小程序项目，添加两张图片。打开index/index.wxml文件，在第一张图片前面添加“＜text＞第1张图＜/text＞”，实现在第一张图片前面显示文本的效果，如图1-25所示。
图1-25 实现在第一张图片前面显示文本的效果
微信小程序页面一般包括：
一个页面逻辑文件，即.js文件。
一个页面描述文件，即.wxml文件，也是视图文件。
一个样式表文件，即.wxss文件。
一个页面配置文件，即.json文件。
在微信小程序项目开发中，页面上的文本与图像一起显示是比较常见的，可以通过样式的设置，设置文本的显示大小、位置、对齐等效果。
2 打开index/index.wxml文件，在第二张图片前面添加“＜text＞第2张图＜/text＞”，实现在第二张图片前面显示文本的效果，如图1-26所示。
3 打开index/index.wxss文件，添加text样式：
设置“display:block”，实现文本以block显示，呈现文本独占一行的效果，如图1-27所示。
图1-26 实现在第二张图片前面显示文本的效果
图1-27 文本独占一行的效果
4 打开index/index.wxml文件，添加一个＜view class="box"＞组件、两个＜view＞组件。
输入＜view class="box"＞，作为文本和图片的容器，如图1-28所示。
图1-28 输入＜view class="box"＞
5 打开index/index.wxss文件，添加.box样式。
设置“display:flex”，容器内的元件采用flex样式，呈现的方式是同一行显示，如图1-29所示。
图1-29 呈现的方式是同一行显示
6 打开index/index.wxss文件，修改.box样式。
添加“justify-content:center”，实现容器内的元件居中显示，如图1-30所示。
图1-30 元件居中显示