微信小程序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,按比例缩放