C#开发微信小程序（五）

导航： C#开发微信小程序系列

 

关于小程序项目结构，框架介绍，组件说明等，请查看微信小程序官方文档，关于以下贴出来的代码部分我只是截取了一些片段，方便说明问题，如果需要查看完整源代码，可以在我的项目库中下载：

https://dev.tencent.com/u/dwBurning/p/ReallyWantToApi/git

https://git.dev.tencent.com/dwBurning/LazyOrders.git

 

又是一个周末，九月已过半，学生们都开学了，公司招聘的应届生也分配到部门，开始上岗了，想当年，我也是校招入职，现如今，已经开始带新人了，不得不感慨一番时光已逝。虽然已经是“老司机”了，但是还是要保持一颗积极向上，爱学习爱生活的心。

今天给《C#开发微信小程序》一个完结，代码部分已经没再更新了，基于学习的目的，该篇也只是记录一下自己学习过程中遇到的问题，为正在摸索的人以指引，可能，这就是我写这些博文的意义了吧！

 

1）关于垂直居中的问题

如下图获取微信个人信息然后展示出来，调的时候花了很长的时间，这都是我对前端布局CSS属性不熟悉的缘故，一开始我使用float，看上去好像也是合情合理，文字部分确实也没有问题，但是我解决不了头像垂直居中的问题，试了各种方法，都没有达到要求，最后通过以下CSS属性解决了问题，那么align-items与justify-content这两个属性分别呈现的是什么效果，可以点击链接跳转到菜鸟教程网深入的学习一下，要特别记录一下的是display必须设置为flex，align-items的设置才生效，这两个属性必须是绑定在一起使用的。

align-items传送门：https://www.runoob.com/try/playit.php?f=playcss_align-items&preval=center

justify-content传送门：https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-between

display: flex;

align-items: center;

justify-content : space-between

 上述布局在移动端是很常见的，随便打开一个微信小程序，可以说都能看到类似的布局，贴一下CSS代码，需要的时候直接拿来用就是了

.section {
   
  padding: 0rpx;
}

.section .line {
   
  margin-left: 30rpx;
  padding-right: 30rpx;
  line-height: