相对于下一个元素的高度定位一个元素

Question

我有以下html：

<span class="targetIcon"/>${targetInfo}

在这里，类targetIcon是：

.targetIcon:before {
    font-family: 'FontAwesome';
    content: "\f56f";
    font-size: 2em;
    float: left;
    margin-right: 10px;
}

当targetInfo的值为：Drag and drop a file or click to browse时，其解析为：

但是，当targetInfo有点长从而移动到新行时，其解析为：

上面的第二张图像（多行）是正确的。

但是，在第一个图像中，文本未在图标之后居中。如何将文本放置在图标的中央？

我希望根据文本是单行还是多行来确定两个元素的位置。

Answer 1

您可以通过Flexbox实现此目标：

.targetIcon {
  display: flex;
  align-items: center;
}
.targetIcon:before {
    font-family: 'FontAwesome';
    content: "\f56f";
    font-size: 2em;
    float: left;
    margin-right: 10px;
}

<span class="targetIcon">Drag and drop a file or click to browse</span>