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

您只需重置内部line-height的{{1}}（因为div是继承者）：

line-height

Demo

注意：.resourceContainer > div { display:inline-block; line-height:100%; vertical-align:middle; }应用于元素本身而不是子元素。因此，您无需为vertical-align设置vertical-align:middle，而是将其设置为直接内部.resourceContainer。

如何使用垂直对齐线高？

1 个答案:

Demo