在数据表中居中响应扩展图标

Question

编辑：

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

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

但很明显，如果由于某种原因我的行垂直变大，这不会缩放。仍在寻找一种中心方式。

所以我试图将响应式展开图标垂直放在我的数据表中（能够将所有内容都放在此行中心）

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

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

问题在于

这是对元素的检查。

我认为我只需要制定一条css规则来处理这个问题，但我无法想到这里需要做些什么。

Answer 1

这里有一个例子，说明如何将伪类中的图标居中放置到容器

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;