文字水平居中和垂直居中的CSS

首先选择一个须要显示文字的选择器,我这里选择的是微信小程序里面的<view>选择器,在其余语言(如html)的选择器里是同样的作法: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;//控制垂直居中,要和元素高度相同
}

最后展现一下文字垂直和水平居中的效果:微信小程序

 

很是简单啦,小伙伴们本身尝试一下吧~~微信

/******************************我是可爱的分割线********************************/spa

相关文章
相关标签/搜索