Div内的垂直对齐图像

Question

我知道大约有100个主题，而我尝试了全部100个主题，但是我无法使它正常工作，如果您要查看，则将图像居中对齐

http://one1.no-ip.org/index.php?hitta=tanto&page=search

您会看到徽标位于屏幕顶部，无论我做什么，我都无法使其正确对齐。 我确定有什么干扰，但我只是找不到，我什至摆弄了我正在使用的方法是否有效并且

http://jsfiddle.net/UJATF/ 图像位于div元素中间的示例

CSS

 .logo{
    background:white;
    position:absolute;

    width:105px;
    height:90px;
    line-height:90px;
    left:180px;
    margin-top:20px;

    line-height:90px;
    text-align:center;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    box-shadow:inset 0px 0px 0px 1px white,inset 0px 0px 10px -4px black;
    z-index:1000;
    overflow:hidden;    
}
.logo img{
    vertical-align:middle;
    max-width:90px;
    max-height:40px;
}

HTML

<div class="logo">
<a href="./index.php?page=profile&amp;id=377948"><img src="http://www.tantobil.se/images/logo.png"></a>
</div>

因此，非常感谢所有帮助

Answer 1

定义您的锚链接display : inline-block并赋予margin-top

像这样

.logo > a {
    display: inline-block;
    margin-top: 22px;
}

结果是

--------

您是否正在动态使用img不是使用此Second选项？

.logo > a {
    display: table-cell;
    height: 90px;
    text-align: center;
    vertical-align: middle;
    width: 105px;
}

Answer 2

由于您在CSS中使用固定高度，因此为什么不使用简单的数学方法确定徽标的top位置？

.content为121px高，.logo为90px高

差异为31px，这意味着您需要15.5px的顶部偏移量。此外，请将.content设置为position: relative以便将徽标相对于.content的顶部放置。