3

中央にdivがあるログインページがあります。高さを調整しましたが、ぴったりはまりました。ただし、 divの上部に検証エラーを追加すると、下部のボタンがdivの外に押し出されます。ページはもう少し複雑ですが、次の HTML と CSS に簡略化しました。

<html>
<head>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div id="content">
        <form action="/Account/LogIn" method="post">
            <div id="login" name="login">
                <div id="validation-errors">
                    <ul>
                        <li>
                            One or more errors here
                        </li>
                    </ul>
                </div>
                <label>Email:</label> <input type="email" name="email"> <br/>
                <label>Password:</label> <input type="password" name="password"> <br/>
                <input id="loginBtn" type="submit" value="Login" />
            </div>
        </form>
    </div>
</body>
 </html>

そしてCSS：

#content {
     position: absolute;
     top: 50%;
     left: 0px;
     width: 100%;
     height: 0px;
     overflow: visible;
     visibility: visible;
     display: block;
 }
 #login {
     background-color:#85ADFF;
     width: 350px;
     height: 100px;
     position: absolute;
     top:-100px;
     bottom:0;
     left:0;
     right:0;
     margin:auto;
 }
 #loginBtn {
     float: right;
}

http://jsfiddle.net/9jA2F/で表示できます。

検証エラーが表示された場合でも、ログインボタンが青いボックスdivにとどまるようにするには、どのような変更を行う必要がありますか。検証エラー divを削除すると、正常に動作するように見えます。つまり、ボタンは青いボックスdiv内にあります。

4

6 に答える 6

2

このメソッドは、コンテンツの高さに関係なく、真の垂直および水平センタリングを提供します (この記事に基づく)

#content {
    display: table;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#content form{
    top: 50%;
    width: 100%;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    position: static;
}

#login {
    background-color:#85ADFF;
    width: 350px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: -50%;
    text-align: left;
}

フィドルをチェックしてください

于 2013-07-10T17:03:17.793 に答える
1

問題は、あなたが着ていることbottom:0;です#login。なぜこれが壊れるのかは完全にはわかりませんが、それを削除すると機能します。

フィドル

于 2013-07-10T16:37:32.870 に答える
1

height: 100px;とtop: -100px;から削除し#loginます。

これを確認してください: http://jsfiddle.net/9jA2F/8/。

#content {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 0px;
    overflow: visible;
    visibility: visible;
    display: block;
}

#login {
    background-color:#85ADFF;
    width: 350px;
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

#loginBtn {
    float: right;
}
于 2013-07-10T16:39:36.823 に答える
1

フィドル

私はずっとデザインに抵抗できませんでした;）

問題は、要素 (ボタンなど) をフロートすると、フローから出てくるため、コンテナが計算された自動高さに含まれないことでした。

ボタンを正しくフロートさせますが、実際にはフロートしないようにするには:

display: block;
margin-left: auto;

それが役に立てば幸い

于 2013-07-10T17:21:11.833 に答える
0

更新されたフィドルを確認してくださいhttp://jsfiddle.net/9jA2F/4/ 

#loginBtn {
position: absolute;
right: 0; bottom: 0;
}
#login {
background-color:#85ADFF;
width: 350px;
height: 100px;
position: relative;
top:-100px;
bottom:0;
left:0;
right:0;
margin:auto;
}
于 2013-07-10T16:39:10.770 に答える
-2

div を height:auto で拡張し、要素と div の境界線の間の距離を維持するためにパディングを与えてみませんか。そうすれば、エラーが発生した場合は拡大し、メッセージが存在しない場合は縮小できます。あなたのjsfiddleのエラーは消えないのでテストできませんが、ここから始めて試してみてください!

于 2013-07-10T16:37:52.713 に答える