我有一个 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 (不要注意图片路径)
最佳答案
您只需要为内部 div
重置 line-height
(因为 line-height
是继承的):
.resourceContainer > div {
display:inline-block;
line-height:100%;
vertical-align:middle;
}
Demo
注意:vertical-align
应用于元素本身而不是子元素。所以你不需要为.resourceContainer
设置vertical-align:middle
,而是直接为内部div
设置。
关于html - 如何使用垂直对齐和行高?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23185796/