Maison > Applet WeChat > Développement de mini-programmes > Comment centrer les images dans le mini-programme WeChat

Comment centrer les images dans le mini-programme WeChat

angryTom
Libérer: 2020-03-23 10:07:55
original
32991 Les gens l'ont consulté

Comment centrer les images dans le mini-programme WeChat

Comment centrer l'image dans l'applet WeChat

Centrer l'image dans l'applet est principalement réalisé en écrivant le style wxss (css) . La méthode consiste à définir l'affichage du composant parent sur flexbox et à ajouter justifier-content: center; et align-items: center;

Apprentissage recommandé : Développement de mini-programmes

La méthode de mise en œuvre spécifique est la suivante :

1. Écrivez d'abord le wxml. et ajoutez une image

<view class=&#39;imagesize&#39;>
  <image src="/images/2.png" class=&#39;in-image&#39;   >
  </image>
</view>
Copier après la connexion

2. Ensuite, écrivez un fichier wxss et ajoutez des styles à l'image et à son élément parent

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

3. 🎜>

Comment centrer les images dans le mini-programme WeChatSite Web PHP chinois, un grand nombre de

tutoriels navicat

, bienvenue pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal