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

如何更好地设置它以使图像不与Log off链接重叠？我已经尝试了很多方法，但我无法指出它。图像是通过绝对定位从文档流中提取的，但是敲击效果是它重叠...我是否认为这是因为它不再是'display：block'元素？

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

TIA，

Answer 1

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

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

Css和绝对垂直对齐问题

1 个答案: