Question

I’m having some CSS trouble and can’t seem to get this right.

I have this in my view:

<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>

And I have the following 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%;
}

How can I set this up better so that the image doesn’t overlap with the Log off link? I’ve tried a load of approaches but I just can’t nail it. The image is pulled from the document flow with the absolute positioning but the knock on effect is that it overlaps … am I right in thinking this is because it’s no longer a ‘display:block’ element?

How can I “restore” it’s real estate in the document? Or is there a completely different approach I should be using to line up all the elements?

TIA,

Answer 1

Try Adding position:relative; to .absoluteCenter

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