微信小程序3个关于字体和图片的小问题

微信小程序3个关于字体和图片的小问题

---

01字体自适应居中

---

代码：

<view>
<text>\n\n欢迎来到微信小程序</text>
</view>

view{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

运行结果：

结论： align-items: center; 垂直居中
justify-content: center; 水平居中
注意：必须设置具体的高度才可以使用垂直居中。

02字体分段（换行）

---

代码：
他们的爱与风华，

只问自由；只问深情；

只问盛放；只问初心；只问敢勇。

无问西东。

文 | 笙笙不兮

<text class='blod'>01</text>

《无问西东》是感人的，更是震撼的。

作为一个看过几千部电影的资深影迷，少有电影会令我观后一直深陷，无法自拔。《无问西东》当列其一。

观影时几度泪崩，散场后依然欲泣。

仿佛心忽然空了，取而代之的，是千般哀愁，万般思绪。

</text> 

运行结果：

结论：可以通过留空白来换行，也可以通过\n来换行。
注意：当通过留空白来换行时，不做左到文字的缩进效果。

03图片自适应居中

---

代码：

 <image  class='img' src='../../images/p1.jpg' mode='widthFix'></image>

.img{
  width: 100%;
}

运行结果：

结论：image标签属性mode：widthFix，按比例缩放