html - 在数据表中居中响应展开图标

Question

编辑:

---

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

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

但显然，如果我的行由于某种原因在垂直方向变大，这将无法缩放。仍在寻找使其居中的方法。

---

所以我试图在我的数据表中将响应式展开图标垂直居中(能够将所有内容与这一行居中)

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

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

问题来了

这是对元素的检查。

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

Answer 1

这里有一个关于如何将伪类中的图标居中到容器垂直居中的示例

.box {
  background: white;
  padding: 10px 10px 10px 30px;
  border: 1px solid black;
  display: inline-block;
  position: relative;
}

.box:after {
  font-family: 'FontAwesome';
  content: "\f055";
  position: absolute;
  top: 50%;
  left: 5px;
  display: inline-block;
  transform: translateY(-50%);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="box">
 +15.00$
</div>