文字竖直方向感觉没有居中

Question

1 2 3 4 5 6 7

<view class="container">     <image class="user-avatar" src="/images/01.jpg"></image>     <text class="user-name"><text style="color:red">Hello</text>,LDP</text>     <view class="moto-container">         <text class="moto">开启小程序之旅</text>     </view> </view>

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.moto-container{     margin-top: 200rpx;     border: 1px solid #405f80;     width: 200rpx;     height: 80rpx;     border-radius: 5px;     text-align: center;     line-height: 80rpx;    }   .moto{     font-size: 22rpx;     color: #405f80; }

Answer 1

7七月 2016-12-02 12:31:46

垂直方向居中，对于文本和容器来说，将文字的line-height和容器高度设置为一样就可以了。上面的代码中，container的height设置为80rpx，那么在.moto中请同样将line-height 设置为80rpx，就可以实现垂直居中了。