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

2023年2月25日 269次阅读

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

img的vertical-align属性设置为middle.然而,生成的偏移量在顶部是8px,在底部是2px – 在Firefox和Chrome中.如果我将垂直对齐属性设置为顶部或基线,则图像位于顶部边缘,将其设置为底部会将它们移动到底部(根本没有间距).

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

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

希望你能帮忙！谢谢！

最佳答案 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

点赞