Question

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

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

我试图找到一种方法来正确对齐它们而不需要额外的标记，但我似乎找不到任何东西。我也尝试了How to vertically align an image inside div的解决方案，但我没有运气。

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

希望你能帮忙！谢谢！

Answer 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 Demo

Answer 2

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

Answer 3

好的，谢谢你们的帮助。我想到了。问题是line-height属性。授予父容器#test或内部.section line-height导致错误计算。如果我将line-height分配给span，则所有内容似乎都可以正常呈现。

垂直对齐的错误偏移：图像中间

3 个答案: