css - メールフォームのフィールドが高すぎて、テキストが中央に配置されているのはなぜですか?

Question

私の知る限り、私のフォーム フィールドは完全に標準です。ページはhttp://worldcastmovie.com/login.phpにあります。

右側の電子メール フィールドは 2 行の高さで、入力は中央に配置されています。私のコードはこれを反映していないようです。サイト内に別の場所を探す必要がありますか?

前もって感謝します！ライアン

問題のコードは次のとおりです。

                                            <div>
                                                    <label>Name:</label>
                                                    <input type='text' name='name'/>
                                            </div>
                                            <div>
                                                    <label>Email:</label>
                                                    <input type='text' name='email' id = 'email'/>
                                                    <div class='error'>
                                                            Please enter your email.
                                                    </div>
                                            </div>
                                            <div>
                                                    <label>City:</label>
                                                    <input type='text' name='city'/>
                                            </div>


                                            <div style='position:relative'>
                                                    <label>Desired Username:</label>
                                                    <input type='text' name='username' id='username'/>
                                                    <div class='error'>
                                                            Please choose different username.
                                                    </div>
                                            </div>
                                            <div>
                                                    <label>Desired Password:</label>
                                                    <input class='input' type='password' name='password' id='password'/>
                                                    <div class='error'>
                                                            Please specify different password.
                                                    </div>
                                            </div>
                                            <div>
                                                    <label>Confirm Password:</label>
                                                    <input class='input' type='password' name='cpassword' id='cpassword'/>
                                                    <div class='error'>
                                                            Please confirm your password.
                                                    </div>
                                            </div>
                                            <!--<div>
                                                    <label>Video:</label>
                                                    <input type='file' name='video' />
                                            </div>
                                            <div>

                                                    <input type='checkbox' name='terms' style='margin-left:12px;margin-top:20px;' id='terms' /><span style='margin-left:10px;'>I have read and agree to the <a href='terms.php'>terms and conditions</a></span>
                                                    <div class='error'>
                                                            You have to read and agree to the terms and conditions.
                                                    </div>
                                            </div>-->

                                            <input type='image' src='/images/register.png' id='submit'/>
                                    </form>

Answer 1

電子メール フィールドを左揃えにし、現在は中央に配置し、上部のパディングを 0 にする必要があります。

 #email {
    text-align: left;
    color: black;
    padding-top: 0px;
    }

Answer 2

メールフィールドを大きく見せるためにパディングトップを使用しています。テキストをパディングトップではなく中央に垂直に揃えたい場合は、パディングではなく高さで遊んでみます..

#email {
text-align: left;
color: black;
height: 100px;
}

Answer 3

#emailの62 行目のルールと一致していstyle.cssます。

#email {
text-align: center;
color: black;
padding-top: 30px;
}

言い換えれば、要素 IDは本来あるべきように一意に使用されません。このルールは、おそらく水平方向のセンタリングをemail必要とする他の要素を対象としています。padding-top

右クリックして「要素を調べる」だけでも、これが表示されます。