Css 如何以未知高度垂直对齐bootstrap 3中的内容

还有一个垂直对齐的问题

我试图将图标垂直对齐到div的中间

到目前为止，我尝试了使用

display:inline block

、

display:table cell

和CSS技巧解决方案。问题是-高度未知

我目前已经设置了

padding top:50%

，效果不错，但没有响应能力。请查看移动视图，查看它的扩展是否超出比例

谢谢

编辑

这是

表格

/

表格单元格

解决方案的CSS-它也不起作用

.calc-field-control { 
  display : table!important;
}

.calc-field-control-list {
   display:table-cell!important;
   vertical-align:middle;
}

---

对于引导列，您需要像这样删除浮点

.calc-field {
    display:table !important;
}

.calc-field-control {
    display:table-cell !important;
    vertical-align:middle;
    text-align:center;
    float:none;
}

---

更新的Bootply:

您不需要知道

高度

就可以使用

表格单元格

选项。