Html 将div内容垂直中心对齐不需要'；行不通

我阅读了许多关于DIV中内容垂直对齐的答案，并尝试实现我看到的主要答案：

.middle-col{
   vertical-align: middle; 
   display: table-cell;

}

但它不起作用

看

由于它是基于bootstrap构建的，所以您需要将HTML的结果向左展开才能看到div

---

我试图实现的是——将中间列的内容垂直居中对齐

您的div容器实际上是“垂直”对齐文本。您的问题是，div容器的高度不大于它包装的文本内容

要实现文本相对于图像的垂直居中，需要将div容器的高度设置为例如480px（图像的高度）

.middle col{
垂直对齐：中间对齐；
显示：表格单元格；
高度：480px；
}

您的中柱位于另一个容器内，该容器没有扩展到整个高度。 以下设置修复了该问题（同时，

.middle col

元素与其父元素合并）

• 另外，我在这里使用的选择器非常通用，建议您使用ID或类似的方法使它们更具体

---

这只是一个提示，您可以将引导的整个CSS复制到您的小提琴中，而不是将其作为外部资源，因为它是垂直压缩的，因此没有任何空间可以将其居中。除非你把垂直误认为水平。@bootstrapcdn什么是URL？谢谢看起来不错，但是你的评论是什么意思？我应该在哪里添加特定id？我使用的选择器（

.row>.col-md-6、.row>.col-md-3

）将影响站点中

.col-md-3/6

类的每个元素，这些元素是

.row

的直接子元素。我假设你只想在这个特定的容器上改变这个行为，所以给他们的容器一些ID并在CSS上使用它（假设容器为

.equal height

，而不是ID，并将选择器更改为类似

.equal height.row>.col-md-6、.equal height.row>.col-md-3

的内容。您所说的容器是什么意思？row就是容器吗？让我们来看看

.middle-col {
    vertical-align: middle;
}
.row > .col-md-6, .row > .col-md-3 {
    display: table-cell;
    float: none;
}