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

Question

<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>

.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，就可以实现垂直居中了。