Witschi262
Blogger
Guten Abend,
habe ein kleines Loginfenster erstellt:
Leider wird trotz Flexbox das Loginfeld nur horizontal, nicht vertikal zentriert. Könnt ihr mir helfen?
Grüße
Lucas
habe ein kleines Loginfenster erstellt:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="align">
<main>
<div class="login_form">
<form action="?" method="POST">
<div class="form_field">
<label for="login_name"></label>
<input id="login_name" type="text" name="username" placeholder="Username" required>
</div>
<div class="form_field">
<label for="login_password"></label>
<input id="login_password" type="password" name="password" placeholder="Password" required>
</div>
<div class="form_field">
<input type="submit" value="Login">
</div>
</form>
</div>
</main>
</body>
</html>
HTML:
body {
background-color: #2c3338;
font-family: Open Sans;
font-size: 9pt;
height: 100%;
}
h1, h2, h3, h4, h5, p {
color: rgba(255, 255, 255, 0.15);
font-weight: 100;
}
.align {
display: flex;
align-items: center;
justify-content: center;
}
main {
width: 90%;
max-width: 30rem;
margin-left: auto;
margin-right: auto;
}
input {
background-image: none;
border: 0;
color: inherit;
font: inherit;
margin: 0;
outline: 0;
padding: 0;
transition: background-color 0.3s;
}
.login_form form input[type='text'], form input[type='password'], form input[type='submit'], form label {
padding: 1rem;
}
.login_form form input[type='text'], form input[type='password'] {
border-radius: 0px 5px 5px 0px;
background-color: rgba(255, 255, 255, 0.1);
border: none;
width: 100%;
}
.login_form form input[type='text']:hover, form input[type='password']:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.login_form form input[type='submit'] {
width: 100%;
border-radius: 5px;
text-transform: uppercase;
font-weight: 700;
color: rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.login_form form input[type='submit']:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.login_form form label {
background-color: #363b41;
border-radius: 5px 0px 0px 5px;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.form_field {
display: flex;
margin: 1rem;
}
Leider wird trotz Flexbox das Loginfeld nur horizontal, nicht vertikal zentriert. Könnt ihr mir helfen?
Grüße
Lucas