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;
}

结果

--------

您使用的{strong>动态与img的使用时间是否相同 第二个选项是

.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的顶部定位。