css - 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」要素ではないためだと思いますか?

ドキュメント内の不動産を「復元」するにはどうすればよいですか? または、すべての要素を並べるために使用する必要があるまったく異なるアプローチはありますか?

ティア、