html - 如何使用垂直对齐和行高？

Question

我有一个 div 中的元素超出了它们的容器，因为我使用了 line-height。但我发现使 vertical-align 起作用的唯一方法是使用 line-height。

谁能解释我为什么会有这种行为以及如何解决它？

还有人对如何使用 vertical-align 有建议或最佳实践吗？

代码如下:

#resources {
    background-color: green;
    width: 100%;
    height: 64px;
}

.resourceContainer {
    float: left;
    text-align: center;
    vertical-align: middle;
    line-height: 64px;
    width: 33.3%;
}

Example (不要注意图片路径)

Answer 1

您只需要为内部 div 重置 line-height(因为 line-height 是继承的):

.resourceContainer > div {
  display:inline-block;
  line-height:100%;
  vertical-align:middle;     
}

Demo

注意:vertical-align 应用于元素本身而不是子元素。所以你不需要为.resourceContainer设置vertical-align:middle，而是直接为内部div设置。