CSS和绝对垂直对齐问题

Question

我遇到了一些 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，

Answer 1

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

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