【微信小程序】【样式】水平、垂直居中

xixuefeng 微信小程序 2017-10-17 9:44:18  2,781 次浏览 样式 已关闭评论

微信小程序，用到了日期和时间控件picker，默认的情况下上下比较窄，当高度设置了以后高矮没问题了，但随之而来的是“开始时间”的文字变成顶端对齐了，当然居中才是最好看的，居中的设置如下：

首先要对布局容器进行设置：
display:flex;

然后就可以利用两个属性
1：justify-content（水平方向）
2：align-items（垂直方向））

例：.wxss文件中

.input{
background-color: #FFFFFF;
height: 38px;
display: flex;
align-items: center
}

.input{

background-color: #FFFFFF;

height: 38px;

display: flex;

align-items: center

}

问题：

当使用（display: flex; align-items: center）属性显示的时候，样式是没问题，确实居中了，但用于时间控件的时候，可能会导致一些功能的不完善，比如：博主用于时间控件的居中，那么最后就导致触发控件的面积，只有“选择时间”那几个字，其他空白处均无法触发控件。

解决办法：改为line-height，大小跟height相同即可

.input{
background-color: #FFFFFF;
height: 38px;
line-height: 38px;
}

.input{

background-color: #FFFFFF;

height: 38px;

line-height: 38px;

}