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

如何更好地设置它，使图像不与注销链接重叠？我尝试了很多方法，但就是无法确定。该图像是从具有绝对定位的文档流中提取的，但链式 react 是它重叠了……我认为这是因为它不再是“display:block”元素是对的吗？

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

TIA，

Answer 1

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

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