首页 > 学院 > 开发设计 > 正文

微信小程序view居中

2019-11-06 09:35:03
字体:
来源:转载
供稿:网友

wxml文件

<view class="main">

  <view class="center">    <text>申请服务商店</text>

  </view>

    <view class="center">      <input class="inputView" name="username" placeholder="请输入服务的商店名称"/>

    </view>

    <view class="buttonlayout">            <button class="button1">申请认证</button>            <button class="button2">添加新服务商店</button>

   </view>

</view>

wxss文件

.main{  display: flex;  flex-direction: column;  justify-content: center;}.inputView{  border: 1px solid #abbcbc;  background-color: white;  border-radius: 10px;  width:80%;  margin-top: 10px;  height: 40px;  text-align: center;  display: flex;  justify-content: center;}.buttonlayout{  display: flex;  flex-direction: row;  justify-content: center;  margin-top: 50px;}.center{  display: flex;  justify-content: center;}.button1{  width:30%;}.button2{  width:45%;}


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表