Alignement vertical

 
Vous n'arrivez pas Ă  faire quelque chose en CSS ? C'est ici qu'il faut demander.
Auteur Message
MissClick
Messages: 5

Alignement vertical

Messagede MissClick » 22 AoĂ»t 2013, 08:47

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 :?:
SachaValentine
Avatar de l’utilisateur
Administrateur
Messages: 16

Re: Alignement vertical

Messagede SachaValentine » 26 AoĂ»t 2013, 08:11

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 ;)
MissClick
Messages: 5

Re: Alignement vertical

Messagede MissClick » 26 AoĂ»t 2013, 09:37

Merci beaucoup ! Je testerai ce soir :D
MissClick
Messages: 5

Re: Alignement vertical

Messagede MissClick » 05 Septembre 2013, 07:57

Merci, c'est exactement ce que je voulais ;)
SachaValentine
Avatar de l’utilisateur
Administrateur
Messages: 16

Re: Alignement vertical

Messagede SachaValentine » 23 Septembre 2013, 15:23

Une nouvelle astuce a été ajoutée au site suite à ce topic :
http://webmasterhelp.fr/astuces.php?lang=2&p=align-vertical
Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

cron