• 简书网微信公众号二维码
您当前的位置: 首页 > 网站建设 > 小程序文字居中怎么做?如何让小程序文字局中?

小程序文字居中怎么做?如何让小程序文字局中?

时间:2023-07-01 14:05 阅读数:53 人阅读 分类:网站建设

  小程序文字居中怎么做?如何让小程序文字局中?微信小程序文字可以设置成局中、靠右或者靠左哦,大家知道小程序文字居中怎么去实现吗?接下来小编为大家介绍小程序文字居中是怎么实现的。

  小程序文字居中怎么做?

  小程序文字居中需要借助flex布局。flex布局有啥用呢?

  最大的作用便是快速实现你所需要的布局(水平居中、垂直居中、左右对齐等)

  小程序flex布局的使用非常简单,在这我将几个常用的场景,其他更深入的可以去查资料了解(我才不会说是因为我懒)

  首先是对布局容器设置display:flex;

  然后你就可以尽情利用两个属*(justify-content(水平方向)和align-items(垂直方向))进行放纵了

  例如众所周知最蛋疼的垂直居中

  /* wxml */

  测试用小玩意儿

  /* wxss */

  view{

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  }

  

  将align-items改成justify-content

  /* wxml */

  测试用小玩意儿

  /* wxss */

  view{

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  }

 

  两个小程序属*一起来

  

  常用场景不止居中布局,还有很多,但一讲起来篇幅难免太长,这里用文字带过,不懂可以留言问我,或者度娘/Google(推荐看阮一峰的教程)

  flex-direction(改变轴线方向): row(水平轴线,默认) column(垂直轴线) //这里讲的是比较常用的布局

  (轴线举例:父级元素使用flex布局,默认布局下块级元素是会换行的,但设置了flex布局后默认就都水平排列了)

  justify-content: flex-start(居于轴线的开头) center(居于轴线的中间) flex-end(居于轴线的末端) space-around(将子元素按比例排列在轴线上) space-between(将子元素排列在轴线两端)

  align-items: 同justify-content

  flex-wrap(规定子元素溢出处理): nowrap(不换行) wrap(顺序换行) wrap-reverse(逆序换行)

  flex-direction(改变轴线方向): row(水平轴线,默认) column(垂直轴线) //这里讲的是比较常用的布局

  (轴线举例:父级元素使用flex布局,默认小程序布局下块级元素是会换行的,但设置了flex布局后默认就都水平排列了)

  justify-content: flex-start(居于轴线的开头) center(居于轴线的中间) flex-end(居于轴线的末端) space-around(将子元素按比例排列在轴线上) space-between(将子元素排列在轴线两端)

  align-items: 同justify-content

  flex-wrap(规定子元素溢出处理): nowrap(不换行) wrap(顺序换行) wrap-reverse(逆序换行)

  以上全部内容供大家参考和学习,具体的小程序文字居中怎么做的方法已经全部为大家整理出来了,所以各位亲们,你在设置小程序文字居中的时候可以参考以上的方法。请多多的关注微小乔。

  

  微信小程序tab栏文字颜色修改怎么弄

  微信小程序标题颜色怎么修改?

  微信小程序轮播之文字轮播