Page 1 sur 1

Alignement vertical

MessagePosté: 22 Août 2013, 08:47
de MissClick
Bonjour,
J'aimerai aligner verticalement un formulaire, le mettre au milieu de ma page et qu'il y reste quand l'utilisateur la redimensionne.
J'ai essayé la propriété vertical-align mais ça ne fonctionne pas :(
Est-ce que quelqu'un peut m'aider :?:

Re: Alignement vertical

MessagePosté: 26 Août 2013, 08:11
de SachaValentine
Bonjour,

Tu ne peux pas aligner un formulaire verticalement avec la propriété CSS vertical-align car elle permet uniquement d'aligner du texte dans certains cas. Va voir sur le site pour plus de détails :
http://webmasterhelp.fr/dico.php?p=dico/css/vertical-align

Pour aligner ton formulaire, il faut que tu utilises les marges (propriétés CSS margin margin) et la position top :

Code HTML
Code : Tout sélectionner
<div class="parent"><form class="child"></form></div>


Code CSS
Code : Tout sélectionner
.parent{
    width:500px;
    height:300px;
    border : 1px solid;
}
.child{
    width:150px;
    height:200px;
    position:relative;
    margin-left : auto;   /*Alignement horizontal*/
    margin-right : auto; /*Alignement horizontal*/
    top : 50%;             /*Alignement vertical */
    margin-top:-100px; /*Alignement vertical */
}

Le top à 50% permet de positionner le fils à la moitié de la hauteur du père. Pour que le fils soit bien centré, il faut lui indiquer un marge négative de la moitié de sa taille afin qu'il soit bien centré.

Voilà, si tu as d'autre questions, n'hésite pas ;)

Re: Alignement vertical

MessagePosté: 26 Août 2013, 09:37
de MissClick
Merci beaucoup ! Je testerai ce soir :D

Re: Alignement vertical

MessagePosté: 05 Septembre 2013, 07:57
de MissClick
Merci, c'est exactement ce que je voulais ;)

Re: Alignement vertical

MessagePosté: 23 Septembre 2013, 15:23
de SachaValentine
Une nouvelle astuce a été ajoutée au site suite à ce topic :
http://webmasterhelp.fr/astuces.php?lang=2&p=align-vertical