28172 sujets

CSS et mise en forme, CSS3

Centrer un div contient form

Bonjour,
je fait ce code pour centrer le form qui est dans le div mais ça marche pas en ci-joint le script :

<!DOCTYPE html>
<html>
<head>
<style>
#test {

display: flex; 
justify-content: center; 
align-items: center; 

}
</style>
</head>


<body>
<div ><label for="adresse" ><h2>Veuillez vous identifier</h2></label></div>
<div id="test">
	<form  action="auth.html" method="get" >

	<div > <label for="login">Login: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" id="login"  name="login"></div><br>
	<div > <label for="pass">Mot de passe: </label><input type="password" id="pass" name="password" minlength="8" required></div><br>
	<div ><label for="user">Vous êtes connecte en tant que : </label>

		<select name="user" id="user">
			<option value="1">Utilisateur</option>
			<option value="2">Administrateur</option>
		 </select>
	 </div><br>

	<div ><input type="submit" value="OK" style="width:100px"></div>
	</form>
</div>

</body>


</html>
Salut, tu étais tout proche^^ En fait, l'élément enfant de ta div était le formulaire complet et pas les champs, il faut donc "sortir" la balise forme de ta div #test. Et ajouter la direction de ta flexbox qui par défaut est en horizontal:

<!DOCTYPE html>
<html>
<head>
<style>
#test {

display: flex; 
flex-direction: column;
justify-content: center; 
align-items: center; 

}
</style>
</head>


<body>
<div ><label for="adresse" ><h2>Veuillez vous identifier</h2></label></div>

<form  action="auth.html" method="get" >
<div id="test">
	<div > <label for="login">Login: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" id="login"  name="login"></div><br>
	<div > <label for="pass">Mot de passe: </label><input type="password" id="pass" name="password" minlength="8" required></div><br>
	<div ><label for="user">Vous êtes connecte en tant que : </label>

		<select name="user" id="user">
			<option value="1">Utilisateur</option>
			<option value="2">Administrateur</option>
		 </select>
	 </div><br>

	<div ><input type="submit" value="OK" style="width:100px"></div>

</div>
</form>
</body>


</html>
Sujet clos
Aller à