欢迎光临,了解微信小程序开发,就上易用通! QQ登录

微信小程序view中用flex实现文字的垂直居中

发布:2021-06-10 09:43浏览:来源:网络 编辑:admin

视图容器view上设置
  1. view{ display: flex; justify-content: center;align-items: center;}


view相当于div是一个视图容器,传统的方法实现div中文字的水平垂直居中是设置div的两个属性:text-align:center;和line-height:100%;即可实现div容器中内容的水平垂直居中,那么今天我们来用flex弹性盒子来实现小程序中view视图容器里面内容的水平垂直居中,话不多说,直接上代码:
  1. //wxml
  2. <view class='section'>
  3.   <view>one</view>
  4.   <view>two</view>
  5.   <view>three</view>
  6. </view>
 
  1. //wxss
  2. .section{
  3.   height: 200rpx;
  4.   display: flex;
  5.   flex-direction: row;
  6.   /* 在父元素view属性上设置一下三个属性并不会实现子元素内容的水平垂直居中,所以要格外注意 */
  7.   /* display: -webkit-flex; */
  8.   /* align-items: center; */
  9.   /* justify-content: center; */
  10. }
  11. .section view{
  12.   width: 200rpx;
  13.   height: 100%;
  14.   /* 得在需要让内容居中的元素上设置以下三个元素才会使里面内容水平垂直居中*/
  15.   display: flex;
  16.   justify-content: center;
  17.   align-items: center;
  18. }
  19. .section view:nth-child(1){
  20.   background: red;
  21.   /* 表示根据是否有剩余宽度进行缩放 */
  22.   flex: 1;
  23. }
  24. .section view:nth-child(2){
  25.   background: orange;
  26. }
  27. .section view:nth-child(3){
  28.   background: pink;
  29. }




免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。