Html 无法进行垂直对齐：引导表中的中间工作

更新

根据jme11回答，d-flex阻止对齐，但是如果没有d-flex，列会完全混乱（使用bootstrap 4） 要重新生成：（第一行应该对齐中间，但不是）

上下文

我想在bootstrap 4表中对齐我的文本。我正在尝试使用

垂直对齐：中间

，但文本仍然与顶部对齐

问题

我错过了什么

标记：

<table class="table">
  <tr class="d-flex">
    <td class="col-1">1</td>
    <td class="col-4" style="vertical-align:middle">Miami</td>
    <td class="col-3">4.0</td>
    <td class="col-3"></td>
  </tr>
</table>

1.
迈阿密
4

结果:

编辑 如果要在tr元素上使用d-flex类以允许在单元格上使用col类，可以通过将d-flex和align items center类添加到特定单元格来垂直对齐该单元格中的文本

.strecher{
高度：200px；
}
.我的桌子{
显示器：flex；
对齐项目：居中；
}

JS-Bin
对于特定单元格：
1.
迈阿密
4
对于所有单元格：
1.
迈阿密
4

您能再添加一点上下文吗？因为在jsbin上，我试图复制你的案例，默认情况下它在中间。。。是的，你是对的，这也是我的问题。我正在使用wrapbootstrap中的minton主题，所以上下文非常大。。。但没有别的花哨。（引导程序4）。我也是html/css的新手，所以任何关于如何诊断干扰的想法都会有所帮助。（我使用的是Chrome开发工具。）好吧，看看该怎么办，我不认为这是个糟糕的问题。我确信很多开发人员会被d-flex困住，或者不是d-flex…我的示例中的内联样式不应该推翻引导样式吗？它完全会，除了在jsBin中，display flex的类被应用了，还有一些其他冲突样式问题，因为您没有应用table类。这里有一个内嵌样式的jsBin的工作版本：我使用的是Bootstrap4，所以我更改了示例中的链接。你是对的，d-flex阻止了对齐，但是如果没有d-flex，柱会完全混乱。非常感谢。看来d-flex这个东西需要更多的关注（和学习）