WeChat ミニ プログラムで写真を中央に配置する方法

WeChat ミニ プログラムで画像を中央に配置する方法

ミニ プログラムで画像を中央に配置する主な方法は、wxss ( css) スタイルで実現する方法ですが、親コンポーネントの表示をフレックスボックスに設定し、justify-content: center; と align-items: center; を追加して要素を縦横中央揃えにします。

推奨学習: 小規模プログラム開発

具体的な実装方法は次のとおりです:

1. まず、wxml を作成します。ファイルを作成し、画像

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

2 を追加します。次に、wxss ファイルを作成し、画像とその親要素

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

3 にスタイルを追加します。効果は次のとおりです

PHP 中国語 Web サイト、多数の navicat チュートリアル 、学習へようこそ!

以上がWeChat ミニ プログラムで写真を中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。