Centrer une page de login horizontalement et verticalement.
J'ai récupérer le code source de ma page de login dans les exemples fournies par le site Bootstrap. Lors de l'affichage, le formulaire s'étale sur tout l'écran et il n'est pas centré comme l'exemple fournie dans le site bootstrap.
Voici le code html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://getbootstrap.com/favicon.ico">
<title>Connexion</title>
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/signin.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class="form-signin" id="monform">
<h2 class="form-signin-heading">Veuillez vous connecter</h2>
<label for="inputEmail" class="sr-only">Adresse email</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Adresse email" required autofocus>
<label for="inputPassword" class="sr-only">Mot de Passe</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Mot de passe" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> souviens-toi de moi
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">se connecter</button>
</form>
</div> <!-- /container -->
</body>
</html> |
et voici le code CSS :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
} |
Comme je suis débutante en html5, je vous demande de bien vouloir m'aider en me proposant une aide.
Merci d'avance pour votre aide.
Batman
