WeChat ミニ プログラムで画像を中央に配置する方法
ミニ プログラムで画像を中央に配置する主な方法は、wxss ( css) スタイルで実現する方法ですが、親コンポーネントの表示をフレックスボックスに設定し、justify-content: center; と align-items: center; を追加して要素を縦横中央揃えにします。
推奨学習: 小規模プログラム開発
具体的な実装方法は次のとおりです:
1. まず、wxml を作成します。ファイルを作成し、画像
<view class='imagesize'> <image src="/images/2.png" class='in-image' > </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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
