微信小程序一行文字水平居中

发布于 2020-03-28  328 次阅读


代码是在这篇文章(微信小程序文字水平对齐各自居左居右)的基础上改的。

WXML

  <view class='common-page-list'>
    <view class='common-page-list-left'><text>文章列表</text></view>
   </view>

20200328112909.png

WXSS

.common-page-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  padding: 0 24rpx;
  background: #fff;
}

.common-page-list-left {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin: auto;
}

20200328112941.png

效果

20200328112832.png

本文标题:《微信小程序一行文字水平居中》

本文链接:https://wnag.com.cn/1102.html

特别声明:除特别标注,本站文章均为原创,本站文章原则上禁止转载,如确实要转载,请电联:wangyeuuu@qq.com,尊重他人劳动成果,谢过~


正因为有要好好实现的梦想,所以今天也要好好加油。