4

我有一个问题正确垂直对齐我的图像。我有div一个高度和行高为 40px 的容器。里面还有另一个div包含 2img和 one span。图像的高度设置为 30px，因此图像按比例缩小。

的垂直对齐属性img设置为中间。然而，在 Firefox 和 Chrome 中，生成的偏移量在顶部是 8px，在底部是 2px。如果我将垂直对齐属性设置为top或baseline图像位于顶部边缘，则将其设置为bottom将它们移动到底部（根本没有间距）。

我试图找到一种无需额外标记即可正确对齐它们的方法，但我似乎找不到任何东西。我还尝试了如何在 div 中垂直对齐图像的解决方案，但我没有运气。

我创建了一个 jsfiddle 来说明问题：http: //jsfiddle.net/pbQDS/

希望你能帮忙！谢谢！

4

3 回答 3

1

CSS：

#test  {
    position:relative;
    width: 980px;
    margin: 20px auto 10px auto;
    padding:0;
    position: relative;
    background: #7B0000;
    border:solid 1px blue;
}

#test .section { 
    display:block;
    position:relative;
    padding:10px 0;
    margin:0;
}
#test .section:last-child { float: none; }
#test .section:first-of-type { padding-left: 180px; }
#test img { padding:0; margin:0; display:inline-block; height:30px; vertical-align: middle; position:relative; top:50%; }
#test .section span {position:relative; left:3px; top:50%; display: inline-block;} }

我的JsFiddle 演示

于 2013-03-12T13:33:42.667 回答
1

我会使用“vs”span将高度扩展到 100% 并使图像与中间对齐。此外，我不会尝试将两个父容器对齐到所需的高度，而只将其中一个对齐以避免额外padding或margin冲突。看看这个演示：http: //jsfiddle.net/NcrGF/1/

于 2013-03-12T14:17:38.637 回答
0

好的，谢谢各位帮忙。我想到了。问题是line-height财产。给父容器#test或内部.sectionaline-height导致计算错误。如果我将 分配line-height给span相反，一切似乎都很好。

于 2013-03-12T15:27:51.403 回答