html - CSS水平对齐对宽度百分比的影响很奇怪

原文 标签 html css asp.net

我知道这可能会让你们很多人感到困惑,因为它对我来说毫无意义。

我正在尝试创建一个登录页面,其中凭据位于页面中心(水平和垂直中心)。
我已经做到了,但在我到达那里的过程中,我遇到了一些我不太理解的东西。

这是我的 HTML 代码:

<div class="LoginWrapper">
<div class="Login">
    <div id="Username" title="Register Number">
        <asp:Label ID="UsernameLabel" runat="server" Text="Username" AssociatedControlID="UserNameTextBox"></asp:Label>
        <asp:TextBox ID="UserNameTextBox" runat="server" CssClass="LoginTextBox"></asp:TextBox>
    </div>
    <div id="Password" title="Password">
        <asp:Label ID="PasswordLabel" runat="server" Text="Password" AssociatedControlID="PasswordTextBox"></asp:Label>
        <asp:TextBox ID="PasswordTextBox" TextMode="Password" runat="server"></asp:TextBox>
    </div>
    <div><asp:Button ID="Button1" runat="server" Text="Login" />
        </div>
</div>

这是我负责对齐的 CSS 类
.LoginWrapper {
    width:1%;  //This is where it gets weird
    height:500px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

.Login {
    width:300px;
    height:auto;
    margin:10px;
    padding:20px;
    display:inline-block;
    text-align:center
}

如您所见,在我的 LoginWrapper 类中,我设置了宽度:1%。由于某种原因,这有效。它设法将我的登录类对齐到水平中心。我试图通过从页面缩小到最远来测试这一点,它仍然保持不变。不同百分比的 react 方式与我的数学无关
我在每个浏览器上都测试过,结果都是一样的。

有人可以解释发生了什么吗?

最佳答案

这是我的答案示例:

JSFIDDLE

HTML

<div class="LoginWrapper center">
    <div class="Login center">
        <div id="Username" title="Register Number">
            <asp:Label ID="UsernameLabel" runat="server" Text="Username" AssociatedControlID="UserNameTextBox"></asp:Label>
            <asp:TextBox ID="UserNameTextBox" runat="server" CssClass="LoginTextBox"></asp:TextBox>
        </div>
        <div id="Password" title="Password">
            <asp:Label ID="PasswordLabel" runat="server" Text="Password" AssociatedControlID="PasswordTextBox"></asp:Label>
            <asp:TextBox ID="PasswordTextBox" TextMode="Password" runat="server"></asp:TextBox>
        </div>
        <div>
            <asp:Button ID="Button1" runat="server" Text="Login" />
        </div>
    </div>
</div>

顺便说一句,您缺少 1 </div> ;

CSS
.LoginWrapper {
    width:100%; 
    height:500px;
    /*display:table-cell; */ no need
    text-align:center;
    vertical-align:middle;
    background:gray;
}
.Login {
    width:300px;
    height:200px;
    margin:10px;
    padding:20px;
    display:inline-block;
    text-align:center;
    background:blue;
}
.center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

关于html - CSS水平对齐对宽度百分比的影响很奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23668613/

相关文章:

javascript - slider 背景

asp.net - RedirectToAction不刷新页面

javascript - 如何使用 HTML5 Canvas 调整图片大小,然后将其上传到 Google 驱动器?

javascript - Vue在更改特定按钮后更新所有按钮文本

html - 向左添加空白边距将水平滚动条添加到空白区域

html - 右对齐具有一个绝对位置的两个 Div

css - 如何将 div 定位在另一个 div 下方

css - 如何调整Bootstrap列的类别以使所有跨度标记都未超过12?

c# - ASP.NET 不断编译

asp.net - 如何使用 LoginControl 存储用户 ID 和名称?