Html 数据表中的响应展开图标居中

编辑：

---

所以我可以通过选择psuedo元素并手动添加一些边距来手动向下移动图标

td::before {
    margin-top:8px;
}

但很明显，如果我的行由于某种原因在垂直方向上变得更大，这将无法扩展。仍在寻找一种方法使其居中

---

因此，我尝试垂直地将响应扩展图标置于我的数据表的中心（能够将所有内容置于这一行的中心）

但这似乎仍然让我的图标不受影响。我也不确定如何为它创建一个规则来捕获它，因为它是由数据表动态生成的

问题就在这里，

这里是对元件的检查。

---

我假设我只需要制定一个css规则来处理这个问题，但我想不出这里需要做什么。

在aexample中，这里介绍了如何在垂直居中于容器的伪类中居中图标

.box{
背景：白色；
填充：10px 10px 10px 30px；
边框：1px纯黑；
显示：内联块；
位置：相对位置；
}
.盒子：之后{
字体系列：“FontAwesome”；
内容：“\f055”；
位置：绝对位置；
最高：50%；
左：5px；
显示：内联块；
转化：translateY（-50%）；
}

+15.00$

尝试在td中选择伪元素，并在CSSLook中找到它。祝你愉快day@karthick非常感谢您在选择上的帮助。如果有人知道的话，我仍然在寻找一个更具可扩展性的解决方案。很抱歉，我没有完全阅读您的编辑。什么是td:：before的完整css？嗯，我可以在您的示例中看到这是如何工作的，但是当我尝试在td:：before不工作之前应用一些样式时。你知道我需要修改哪些规则吗？检查它们是否被默认的数据表css覆盖，也许你必须把它们放进去！重要的

.table > tbody > tr > td {
    vertical-align: middle;
}