0

フォームを垂直方向と水平方向の両方に揃えるのに問題があります。

これが IE をサポートしていなくてもかまいません。ユーザーに別のブラウザーを使用するように伝える IE 検出スクリプトを実装する予定ですが、Firefox と Chrome のサポートは必須です。

これが私が現在持っているものです：

HTML

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="global.css">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div id="wrapper">
        <div id="logo_div">
            <img src="../images/logo.png" id="logo">
        </div>

        <div id="login">
            <form name="searchform" action="checklogin.php" method="post" id="login_form">
            <br>
                User Name : <input type="text" name="myusername" size="16" /><br>
                Password : <input type="password" name="mypassword" /><br>
                <input type="submit" value="Login" /><br>
            </form>
        </div>
    </div>
    </div>
</body>
</html>

グローバル CSS

#wrapper {
    position: relative;
    max-width: 1024px;
    height: 1000px;
    margin-left: auto;
    margin-right: auto;
}
#logo_div {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

#logo {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

インデックス CSS

#login {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
#login_form {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

どんな助けでも大歓迎です。ありがとう

4

2 に答える 2

0

現在、#login div はページ幅の 100% を使用しています。正しく中央に配置できるように、幅を小さく設定する必要があります。また、top を 50% から div の高さ / 2 を引いた値に設定することで、垂直方向に中央揃えにすることができます。

このような

#login
{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    top: 50%;
    margin-top:-50px;
}
于 2013-05-02T15:32:53.630 に答える