css - CSS和绝对垂直对齐问题

我在CSS上遇到了麻烦，似乎无法正确解决这个问题。

我认为：

<div class="loginPartialWrapper">
    @(User.Identity.Name)
    @Html.ActionLink("My Account", "Details/" + Api.Security.SecurityClient.GetUserId(User.Identity.Name), "UserProfile", routeValues: null, htmlAttributes: new { @class = "username", title = "View / Edit your profile" })
    <img class="user-profile-small absoluteCenter" src="../../Images/160px-Anon.png" />
    @Html.ActionLink("Log off", "LogOff", "Account")
</div>

我有以下CSS：

.user-profile-small {
width: 20px;
height: 20px;
}

.loginPartialWrapper {
position:relative;
height:20px;
line-height:20px;
}

.absoluteCenter {
margin:auto;
position:absolute;
top:0;
bottom:0;
}

.absoluteCenter {
max-height:100%;
max-width:100%;
}

如何更好地进行设置，以使图像不与注销链接重叠？我已经尝试了很多方法，但是我无法解决问题。图像是从文档流中以绝对位置拉出的，但连锁效果是重叠的……我是对的，因为这不再是'display：block'元素了吗？

如何在文档中“还原”它的不动产？还是我应该使用一种完全不同的方法来排列所有元素？

TIA，

最佳答案

尝试将position:relative;添加到.absoluteCenter

.absoluteCenter {
margin:auto;
position:relative;
top:0;
bottom:0;
}