How to center pictures in WeChat mini program

How to center the picture in the WeChat mini program

The main way to center the picture in the mini program is to write wxss (css) style to achieve it. The method is to set the parent component display to flexbox, and add justify-content: center; and align-items: center; to center the element horizontally and vertically.

Recommended learning: Small program development

The specific implementation method is as follows:

1. First write the wxml file and add a Picture

<view class=&#39;imagesize&#39;>
  <image src="/images/2.png" class=&#39;in-image&#39;   >
  </image>
</view>

2. Then write the wxss file and add styles to the picture and its parent elements

page{
   height:100%
}
.imagesize{
 display:flex;                    //flex布局
 justify-content: center;         //水平轴线居中
 align-items:center;                //垂直居中
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}

3. The effect is as follows

PHP Chinese website, a large number of navicat tutorials, welcome to learn!

The above is the detailed content of How to center pictures in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!