引言
微信小程序中的map组件优先级较高,其子节点只允许是部分标签(如cover-view),但cover-view和view组件不一样,flex布局在cover-view中不管用,在pc端微信小程序开发工具中可以正常显示flex布局,但使用真机时所有flex布局失效,因此需要技巧以实现cover-view中文本居中。
下面这个简单的程序在真机上布局混乱:
<!--wxml-->
<map>
<cover-view class="cvcls">请把我居中</cover-view>
</map>
/*wxss*/
.cvcls{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
文本水平居中
这个非常简单,使用CSS的text-align属性即可:
<!--wxml-->
<map>
<cover-view class="cvcls">请把我居中</cover-view>
</map>
/*wxss*/
.cvcls{
text-align: center;
}
文本竖直居中
查阅Cover-view官方文档:
唯一一个可以在cover-view组件内被嵌套的原生html组件是button!
思路非常简单,button内的文本都是水平竖直居中的,因此我们可以在cover-view内100%嵌套一个button组件,将文本包含于button组件内即可解决竖直居中问题:
<!--wxml-->
<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;*/
/*可以补充背景颜色、字体颜色等*/
}