安卓微信浏览器用line-height文字垂直居中偏上问题

Question

该怎么解决？？

Answer 1

考虑一下css3的flex

.div{
    display: flex;
    justify-content: center;
    align-items:center;
}

Answer 2

父元素可以考虑用 flex 布局，子元素设置 line-height 为 normal。

<div class="chip">
  <div class="chip-label">Text Content</div>
</div>

样式

.chip {
    padding-left: 10px;
    padding-right: 10px;
    font-weight: normal;
    display: inline-flex;
    box-sizing: border-box;
    vertical-align: middle;
    align-items: center;
    margin: 2px 0;
    background-color: rgba(0,0,0,0.12);
    font-size: 13px;
    color: #000;
    height: 24px;
    line-height: 24px;
    border-radius: 24px;
    position: relative
}

子元素就会继承父元素的 line-height，此时在微信浏览器内核中会无法显示居中。

.chip-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    flex-shrink: 1;
    min-width: 0;
}

处理

.weixin .chip-label {
    line-height: normal;
}