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

来源:

LLLLLLDP

2016-12-02

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

http://szimg.mukewang.com/5840e8ba0001589001870064.jpg

.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;
}


写回答

1回答

7七月

2016-12-02

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

0
0

微信小程序入门与实战(全新版) 超20000人学习的好课

4年同步微信官方迭代,累计20000+人学习, 比微信官方更火爆!

23867 学习 · 6899 问题

查看课程