Center A Formular HTML CSS

Question

Hallo Ich habe Probleme mit dem Zentrieren eines Formulars für eine Login-Seite. Ich bin nicht gut mit CSS und es ist eine Weile her, seit ich mit HTML gespielt habe. Ich möchte die Eingabefelder zentrieren und den Text links neben den Eingabefeldern ausrichten sowie ein Bild zentrieren, wie im Bild. Ich habe versucht, verschiedene Div-ID und Tags zum Formular hinzufügen, aber ich kann nicht scheinen, den CSS-Teil herauszufinden. Ich schätze jede Hilfe und entschuldige, wenn das CSS schlampig ist.

body { 
 
    background-color:lightgray; 
 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
 
} 
 
h1 { 
 
    color: black; 
 
} 
 
p { 
 
    color: black; 
 
} 
 

 
html { 
 
    text-alight: center; 
 
} 
 

 
#login { 
 
    text-align:center; 
 
} 
 

 
input[type=text], input[type=date], input[type=password] { 
 
    width: 30%; 
 
    height: 50px; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    box-sizing: border-box; 
 
} 
 

 
input[type=submit] { 
 
    width: 30%; 
 
    height: 50px; 
 
    background-color: #4CAF50; 
 
    border: none; 
 
    color: white; 
 
    padding: 16px 32px; 
 
    text-decoration: none; 
 
    margin: 4px 2px; 
 
    cursor: pointer; 
 
} 
 

 
#service_type, #series, #speaker, #users { 
 
    width: 30%; 
 
    height: 50px; 
 
} 
 

 
@media only screen and (max-device-width: 1024px){ 
 

 
input[type=text], input[type=date], input[type=password] { 
 
    width: 100%; 
 
    height: 50px; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    box-sizing: border-box; 
 
} 
 

 
input[type=submit] { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #4CAF50; 
 
    border: none; 
 
    color: white; 
 
    padding: 16px 32px; 
 
    text-decoration: none; 
 
    margin: 4px 2px; 
 
    cursor: pointer; 
 
} 
 

 
#service_type, #series, #speaker, #users{ 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 

 
#keypad_users{ 
 
    width: 345px; 
 
    height: 50px; 
 
    vertical-align:middle; 
 
    text-align:center; 
 
    border:1px solid #000000; 
 
    font-size:30px; 
 
    font-weight:bold; 
 
} 
 

 
#keypad {margin:auto; margin-top:10px;} 
 

 
#keypad tr td { 
 
    vertical-align:middle; 
 
    text-align:center; 
 
    border:1px solid #000000; 
 
    font-size:18px; 
 
    font-weight:bold; 
 
    width:100px; 
 
    height:80px; 
 
    cursor:pointer; 
 
    background-color:#666666; 
 
    color:#CCCCCC; 
 
} 
 

 
#keypad tr td:hover { 
 
background-color:#999999; 
 
color:#FFFF00; 
 
} 
 

 
#display { 
 
text-align:center; 
 
    width:345px; 
 
    margin:10px auto auto auto; 
 
    background-color:#000000; 
 
    color:#00FF00; 
 
    font-size:48px; 
 
    border:1px solid #999999; 
 
} 
 
#message { 
 
    text-align:center; 
 
    color:#009900; 
 
    font-size:18px; 
 
    font-weight:bold; 
 
    display:none; 
 
} 
 

 
}

<div id="login"> 
 
<form action = "login.php" id="login" method ="POST"> 
 
Username <br /> 
 
<input type="text" name="username" id="username" required /><br /><br /> 
 
Password <br /> 
 
<input type ="password" name="password" id="password" required /><br /><br /> 
 

 
<input type="submit" name="submit" value="Log in"> 
 

 
</form> 
 
</div>

Answer 1

Ich habe Ihr HTML verbessert. Allen Formulareingaben sollte ein label Element zugeordnet sein. Verwenden Sie auch nicht br für den Abstand verwenden Sie stattdessen Padding/Rand.

Weitere mehr Verwendung haben eine doppelte id, IDs müssen eindeutig auf der Seite sein.

#login_container /*This is Our base container for the login "control" */ 
 
{ 
 
    width:30%; /*Define the width of the control*/ 
 
    margin:auto; /*This Provide the horizontal centering of the control*/ 
 
    padding:120px 10px 10px 10px; /*Add some padding, the first number is the top and provides room for the image*/ 
 
    background-image:url(" http://fillmurray.com/100/100"); /*Add our background image, thanks Bill Murray*/ 
 
    background-position:center 10px; /*Position our image, first is Horizontal alignment, second is top*/ 
 
    background-repeat:no-repeat; /*One Bil Murray is more than enough*/ 
 
    background-color: #F0F0F0; /*Base Background image*/ 
 
} 
 

 
#login_container label 
 
{ 
 
    display:block; /*Label will now take up a whole line*/ 
 
    margin-bottom:.25em; /*Give it some room underneath*/ 
 
} 
 

 
#login_container input[type="text"], #login_container input[type="password"], #login_container input[type="submit"] 
 
{ 
 
    width:100%; /*Form controls now take 100% width of the container*/ 
 
    margin-bottom:0.5em; 
 
}

<div id="login_container"> <!-- Can't have duplicate ID's --> 
 
<form action = "login.php" id="login" method ="POST"> 
 
    <label for="username">Username </label> 
 
    <input type="text" name="username" id="username" required /> 
 
    <label for="password">Password</label> 
 
    <input type ="password" name="password" id="password" required /> 
 
    <input type="submit" name="submit" value="Log in"> 
 
</form> 
 
</div>

Answer 2

Um ein divmargin-left Mitteneinstell und margin-right zu auto und weisen sie eine feste width. In Ihrem Fall wäre dies für #login.

Answer 3

Ich habe eine JSfiddle für Sie here (click me please) gemacht, die dem Bild ähnelt, das Sie hinzugefügt haben.

Da keine dritte Seite aufgefordert zu verwenden, wie ich hier den Code hinzugefügt habe:

HTML

<div id="login"> 
    <form action = "login.php" id="login" method ="POST"> 
    <div class="picture"> 

    </div> 
    <p>Username</p> 
    <input type="text" name="username" id="username" required /><br /><br /> 

    <p>Password</p> 
    <input type ="password" name="password" id="password" required /><br /><br /> 

    <input type="submit" name="submit" value="Log in"> 
    </form> 
</div> 

CSS

body 
{ 
    background-color:lightgray; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
} 

#login 
{ 
    text-align:center; 
    width: 50%; 
    margin: 0 auto; 
} 
.picture 
{ 
    width:100px; 
    height: 100px; 
    border-radius: 100px; 
    background-color:red; 
    margin: 0 auto; 
} 
#login p 
{ 
    float: left; 
} 
input[type=text], input[type=date], input[type=password] { 
    width: 100%; 
    height: 50px; 
    padding: 12px 20px; 
    margin: 8px 0; 
    box-sizing: border-box; 
} 

input[type=submit] { 
    width: 100%; 
    height: 50px; 
    background-color: #4CAF50; 
    border: none; 
    color: white; 
    padding: 16px 32px; 
    text-decoration: none; 
    margin: 4px 2px; 
    cursor: pointer; 
} 

EDIT: Neue Geige hier: https://jsfiddle.net/gay1ufa1/2/

Answer 4

Ein Problem in Ihrem Code ist, dass Sie die ID "login" zweimal verwendet werden, die nicht getan werden muss. Ich habe eine codepen, die Sie hier finden:

http://codepen.io/anon/pen/dNWQgp

Was ich tat, grundsätzlich (außer ein div Addieren Sie das Bild im Bild darstellen): Ich habe folgende CSS zu einem Wrapper DIV um die ganze zugewiesen Form und Bild. Es nutzt Flexbox, um den Inhalt zu zentrieren. Außerdem habe ich dem form Element eine width Einstellung (40%) zugewiesen.

.wrapper { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}