微信小程序垂直横向居中对齐布局

多个文本垂直居中对齐

     display: flex;//布局横向
     justify-content: center;//纵向居中
     align-items: center;//横向居中
     flex-direction: column;//纵向排列

      text-align: center; //文本居中对齐

      margin: 10px 0;  //上下10px,左右0px

      width: 100%;  //横向占满宽度

      position: fixed; //固定位置

      toFixed(2)  //保留两位小数

      height: 100vh;/* 100vh占满空间 */

       flex: 1;/*占满空间 */
       overflow-y: auto;/* 超出隐藏*/

多个文本横向对齐

        display: flex;
        justify-content: space-around;  //布局贴边

单文本对齐方式

         display: flex;
          flex-direction: column; //纵向排列
          align-items: center;//横向居中
          justify-content: space-around;//分散对齐

 .panel-title {
      line-height: 45px;//行高
      padding-left: 10px;//左间距
      font-size: 15px;//字体大小
      border-bottom: 1x solid #F4F4F4;//底部分隔线
    }

.panel-list-item{
    display: flex;
    justify-content: space-between;
    align-items: center;//纵向上居中对齐
    font-size: 15px; //字体15像素
    padding: 0 10px;//上下0 左右10px
    line-height: 45px;//行高
  }

.history-title {
    display: flex;  //左右对齐
    justify-content: space-between; //靠边对齐
    align-items: center;
    height: 40px;
    font-size: 13px;
    border-bottom: 1px solid #efefef; //添加一个像素的下划线

    display: block; //让内容保持间隙
   }

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！