CSS горизонтальное выравнивание действует странно с процентами ширины

Question

CSS горизонтальное выравнивание действует странно с процентами ширины

0

Я знаю, что это, вероятно, смутит вас, потому что это не имеет смысла для меня.

Я пытаюсь создать страницу входа в систему, где учетные данные находятся в центре страницы (горизонтальный и вертикальный центр).
Я достиг этого, но в моем процессе, чтобы добраться туда, я столкнулся с чем-то, что я не мог понять.

Это мой 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%. И почему-то это работает. Ему удается выровнять мой класс Login в горизонтальном центре. Я попытался проверить это, увеличив масштаб страницы до самого дальнего и все равно оставаясь прежним. Различные проценты реагируют таким образом, что бросают вызов моей математике
Я тестировал его в каждом браузере, и результаты остались прежними.

Может кто-нибудь объяснить, что происходит?

Sanketh. K. Jain 15 май 2014, в 05:48

Источник

Теги:

html

css

asp.net

1 ответ

Ещё вопросы

Viscocent · Answer 1 · 2014-05-15T03-42-00.000Z

Вот пример моего ответа:

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>

btw, вам не хватает 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;
}

Ценю ваш вклад по этому вопросу. Мне нравится идея, которую вы использовали. Благодарю. Но мой вопрос состоял в том, чтобы попытаться понять, что именно происходит с моим кодом. Как этому 1% удалось выровнять по центру по горизонтали?