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的頂部放置。