Javascript svg图标未与容器的中心对齐

我正在设计一个列表，在那里我使用svg图标来显示列表中的项目。现在，我的图标和文本已正确对齐。它在角落里，如下所示：

这是我的代码：

<div
                v-for="item in fav"
                :key="item.id"
                class="fav-list-item mb-2"
            >
            <div class="del_fav" @click="handleListClick(item)">
                <svg-icon v-if="!favEdit" name="building" />
                <svg-icon v-else name="delete" fill="#E30000" />
            </div>
            <div class="pl-2">
                {{ item.fav }}
            </div>
            </div>

添加一块css

.del_fav {

display:flex;
justify-content:center;
align-items:center;
flex-direction:row;

}

---

在我看来，您只关注

.del_fav

本身，而不是它的子对象（svg）。也许可以尝试添加如下内容：

.del_fav{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

.del_fav {

display:flex;
justify-content:center;
align-items:center;
flex-direction:row;

}