700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序中view水平垂直居中

微信小程序中view水平垂直居中

时间:2019-03-14 02:02:04

相关推荐

微信小程序中view水平垂直居中

微信小程序布局中view有时候需要在水平方向和垂直方向上都居中,发现flex布局可以实现,例如view1(图中灰色方块)需要实现居中,可以用如下设置实现:

wxss文件中的设置如下:

.main {width: 100%;height: 100%;position: fixed;background-color: #c573ac;**display: flex;flex-direction: column;justify-content: space-around;**这三句使mainContent在垂直方向居中(main是mainContent的父容器)}.mainContent {width: 100%;**display: flex;flex-direction: column;align-items: center;**使mainContent中的view1水平方向上居中(mainContent是view1的父容器)background-color: #f20000;}.view1{width:100px;height:100px;background-color: #ccc;}

wxml文件中代码:

<view class="main"><view class="mainContent"><view class="view1"></view></view></view>

这样就可以使view1居中

(刚接触微信小程序有很多不懂的地方,这种方式是我觉得自己可以理解的有效的方式,如果有其他方式我们可以探讨)``

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。