文字放置在图片的水平和垂直居中的位置上
效果图片
屏幕快照 2018-02-11 下午3.32.02.png
wxml代码如下
<view class="image-parent">
<image class='image' mode='widthFix' src='../../images/answer-ad.png'></image>
<view class="child">child</view>
</view>
wxss代码如下
.image {
width: 746rpx;
}
.image-parent {
height: 746rpx;
position: relative;
border: 2rpx solid red;
}
.child {
width: 100px;
height: 24px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
text-align: center;
background: yellowgreen;
}
要点：
- 查看图片宽高比，上述示例中图片宽高比为1：1
- wxml中<image>标签设置mode为'widthFix'，即“宽度不变，高度自动变化，保持原图宽高比不变”
- 设置image宽度为w，上述示例中w=746rpx
- 设置image所在的父容器height值，根据图片的宽高比，算出来image的height值，并且赋值给父容器height，上述示例中父容器height=746rpx（这一步必须注意，如果不设置父容器height与image的height值相等，会出现不居中或者图片底部会有一栏空白）
- 注意文字的样式.child中通过绝对布局和margin实现了垂直居中
