微信小程序布局-图片+文字

最新推荐文章于 2024-03-22 10:27:32 发布

原创最新推荐文章于 2024-03-22 10:27:32 发布 · 9.8k 阅读

39 ·

CC 4.0 BY-SA版权

本文介绍了如何在微信小程序中实现文字与图片的水平和垂直居中布局。关键点包括设置`<image>`标签mode为'widthFix'保持宽高比，设置父容器的height与image的height相等，以及利用绝对定位和margin实现文字的垂直居中。

文字放置在图片的水平和垂直居中的位置上

效果图片

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实现了垂直居中

作者：代码坊
链接：https://www.jianshu.com/p/138252f2ad8c