两个元素垂直不居中的问题

下面内容部分感觉没有垂直居中

<view class="right">
    <text class="text">查看权益</text>
    <uni-icons type="right" size="16" color="#5a3a06"></uni-icons>
</view>

从当前样式看，.right 已经设置了 align-items: center，它的父级 .vip-info 也设置了 align-items: center。所以容器本身的垂直居中规则是有的。

视觉上像没对齐，可能是文字默认行高和 uni-icons 的字体图标基线不同造成的。可以给文字明确设置行高：

.right {
  display: flex;
  align-items: center;

  .text {
    font-size: 24rpx;
    font-weight: 600;
    color: #2b55ad;
    line-height: 1; // 重要内容
    white-space: nowrap;
  }
}

另外，.text 上的 display: flex 和 align-items: center 对单行文字没有必要，可以去掉。如果这样仍然偏移，再检查运行平台上 uni-icons 的实际显示效果。

两个元素垂直不居中的问题

评论