解决微信小程序cover-view组件内文本居中问题

偏执的太偏执、 2022-12-28 04:17 411阅读 0赞

### 目录 ###

*  引言
 *  文本水平居中
 *  文本竖直居中

# 引言 #

微信小程序中的map组件优先级较高，其子节点只允许是部分标签（如cover-view），但cover-view和view组件不一样，flex布局在cover-view中不管用，在pc端微信小程序开发工具中可以正常显示flex布局，但使用真机时所有flex布局失效，因此需要技巧以实现cover-view中文本居中。  
下面这个简单的程序在真机上布局混乱：

<map>
        <cover-view class="cvcls">请把我居中</cover-view>
    </map>

/*wxss*/
    .cvcls{ 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

# 文本水平居中 #

这个非常简单，使用CSS的text-align属性即可：

<map>
        <cover-view class="cvcls">请把我居中</cover-view>
    </map>

/*wxss*/
    .cvcls{ 
        text-align: center;
    }

# 文本竖直居中 #

查阅[Cover-view官方文档][Cover-view]:  
![Cover-view官方文档][Cover-view 1]  
唯一一个可以在cover-view组件内被嵌套的原生html组件是button！  
思路非常简单，button内的文本都是水平竖直居中的，因此我们可以在cover-view内100%嵌套一个button组件，将文本包含于button组件内即可解决竖直居中问题：

<map>
        <cover-view class="cvcls">
            <button class="btncls">请把我居中</button>
        </cover-view>
    </map>

/*wxss*/
    .cvcls{ 
        /*此处填充cover-view组件的位置布局*/
        /*可以补充背景颜色、字体颜色等*/
    }
    .btncls{ 
        position: absolute;
        left: 0%;
        top: 0%;
        width: 0%;
        height: 0%;
        /*button组件是自动居中的，如果不放心可以加上text-align: center;*/
        /*可以补充背景颜色、字体颜色等*/
    }

[Cover-view]: https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
[Cover-view 1]: /images/20221120/0b5843aded4c4c108d46d7d1b4b8611f.png