中间对齐svg与内联文本

Question

我有一个简单的svg图像，其中一些内联文本被粘贴here。如何垂直对齐文本和图标？我尝试了常用的中间对齐方法，例如设置否定martin-top，使用table-cell但没有运气。

HTML：

<div class="ImageLabel__label___Yb88q">
    <i class="ImageLabel__icon___bFeGT">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
            <title>email</title>
            <path d="..."></path>
        </svg>
    </i>
    john@gmail.com
</div>

CSS：

svg {
  width: 25px;
  height: 25px;
  margin-right: 3px;
}

Answer 1

您无法添加margin-top，因为它需要float值。你可以这样做：

svg {
  width: 25px;
  height: 25px;
  margin-right: 3px;
  float: left;
  margin-top: -3px;
}

Answer 2

   svg {
    width: 25px;
    height: 25px;
    margin-right: 3px;
    Vertical-align: middle;   /*----- Add this property in your svg -----*/
    }