So zentrieren Sie Bilder im WeChat-Miniprogramm

So zentrieren Sie das Bild im WeChat-Applet

Das Zentrieren des Bildes im Applet wird hauptsächlich durch Schreiben im WXSS-Stil (CSS) erreicht Die Methode besteht darin, die Anzeige der übergeordneten Komponente auf Flexbox zu setzen und justify-content: center und align-items: center hinzuzufügen.

Empfohlenes Lernen: Mini-Programmentwicklung

Die spezifische Implementierungsmethode ist wie folgt:

1. Schreiben Sie zuerst die WXML Datei und fügen Sie ein Bild hinzu

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

2. Schreiben Sie dann eine WXSS-Datei und fügen Sie Stile zum Bild und seinem übergeordneten Element hinzu

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

3. Der Effekt ist wie folgt

PHP chinesische Website, eine große Anzahl von Navicat-Tutorials, willkommen zum Lernen!

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie Bilder im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!