美文网首页
微信小程序: 让<view>view内容</v

微信小程序: 让<view>view内容</v

作者: 长若执念 | 来源:发表于2019-02-27 18:28 被阅读1次

代码如下:

//在 test.wxml中:
<view class="myview"> 
         <view class='delete'>删除</view>
  </view>

//在test.wxss中:
/*任务动态 底部视图  */
.myview {
  display: flex;
  height: 70rpx;
}

.delete {
  text-align: center;
  line-height: 70rpx;
}

注意到代码细节没有?
关键让 <view>中的内容昂 "删除" 水平居中需要的是 它的父视图的 (高度)height 对应的值 和 它的(单行文字占的高度) line-height 的值一样,这样就做到了垂直居中
text-align: center保证了水平居中.

相关文章

网友评论

      本文标题:微信小程序: 让<view>view内容</v

      本文链接:https://www.haomeiwen.com/subject/xqtquqtx.html