素材牛VIP会员
微信浏览器下flex布局子元素内容不水平居中
 黑***心  分类:Html5  人气:1330  回帖:1  发布于6年前 收藏

底部的一个bar使用flex布局,放了三个子div
子div内的内容不水平居中
在有些iphone下水平居中,有些iphone向右偏移了3 4 px

<div class="tab" :class="{ ipx: isIpx }">
      <div class="tab-item">
        <div class="itemWrapper">
          <router-link to="/home" tag="a" :class="{ 'active': position===1 }" style="text-decoration:none;">
            <img src=".././common/img/home-active@2x.png" alt="" v-if="position===1" width="40" height="40">
            <img src=".././common/img/home@2x.png" alt="home" v-else width="40" height="40">
            <div class="text">首页</div>
          </router-link>
        </div>
      </div>
      <div class="tab-item">
        <div class="itemWrapper">
          <router-link to="/rules" tag="a" :class="{ 'active': position===2 }" style="text-decoration:none;">
            <img src=".././common/img/rule-active@2x.png" alt="" v-if="position===2" width="40" height="40">
            <img src=".././common/img/rules@2x.png" alt="home" v-else width="40" height="40">
            <div class="text">活动规则</div>
          </router-link>
        </div>
      </div>
      <div class="tab-item">
        <div class="itemWrapper">
          <router-link to="/list" tag="a" :class="{ 'active': position===3 }" style="text-decoration:none;">
            <img src=".././common/img/list-active@2x.png" alt="" v-if="position===3" width="40" height="40">
            <img src=".././common/img/list@2x.png" alt="home" v-else width="40" height="40">
            <div class="text">榜单</div>
          </router-link>
        </div>
      </div>
    </div>
    
    
     .tab
      display flex
      display: -webkit-flex; /* Safari */
      position fixed
      bottom 0
      width 100vw !important
      height 54px
      background #ffffff
      z-index 400
      border none
      .tab-item
        flex 1
        text-align center
        margin-top 6px
        /*border 1px solid #000*/
        .itemWrapper
          display flex
          width 100%
          justify-content center
          a
            display grid !important
            text-align: -webkit-center;
          img
            height 24px
            width 24px
          & > a
            display block
            font-size 14px
            opacity 1
            color #919191
          .active
            color #f3b26d
          .text
            margin-top: 3px
 标签:csshtml5

讨论这个帖子(1)垃圾回帖将一律封号处理……

Lv3 码奴
ze***91 站长 6年前#1

已解决,是子元素下 justify-content center属性的问题,当初用这个属性是因为放的图片与文字中间有一块间隙,后给img一个vertical-align: bottom;属性解决了

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取