vue icon和文字 合并到一行， 文字水平垂直居中

你可以使用Flexbox布局来实现将图标和文字合并到一行，并将它们水平垂直居中。以下是一个示例代码：

<div class="wrapper">
  <i class="icon"></i>
  <span class="text">Hello World</span>
</div>

.wrapper {
  display: flex;
  align-items: center;
}

.icon {
  font-size: 24px;
  margin-right: 10px;
}

.text {
  font-size: 16px;
  line-height: 1;
}

在上面的代码中，我们使用了Flexbox布局来将`.icon`和`.text`元素包含在一个`.wrapper`容器中。然后，我们使用`align-items: center`来使它们垂直居中，并使用`margin-right`属性来为图标添加一些间距。最后，我们使用`line-height`属性来使文字垂直居中。