26815 sujets

CSS et mise en forme, CSS3

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>