首先选择一个需要显示文字的选择器,我这里选择的是微信小程序里面的<view>选择器,在其他语言(如html)的选择器里是一样的做法:
<view class="btn-item">编辑</view>
接下来针对 .btn-item 来写样式:
.btn-item{
background-color: #fc8675;
border-radius: 50px;
color: white;
font-weight: bold;
font-size: 24px;
width: 100px;
height: 100px;
text-align: center;//水平居中
line-height:100px;//控制垂直居中,要和元素高度相同
}
最后展示一下文字垂直和水平居中的效果:
非常简单啦,小伙伴们自己尝试一下吧~~
/******************************我是可爱的分割线********************************/