Les textes se centre comme sur word via ce panel ATTENTION : ça ne marche que pour les texte pas les boutons les images etc...
On peut centrer les élément avec une largeur définie en utilisant
les marges, mais il faut que ces élément aient un largeur (width) définie sinon ça ne marche pas
les marges, mais il faut que ces élément aient un largeur (width) définie sinon ça ne marche pas
Ensuite on les centre en cliquant sur ce bouton à droite dans spacing
cela crée des marges automatiques qui vont centrer l'élément
2) centrer des éléments en utilisant les flexbox
Pour transformer un container en flexbox on va là et on clique sur "Flex"
dansla capture d'écran on a créé une flexbox ou tous les éléments vont s'empiler les un sous les autres , se mettre au centre et se caler sur le haut de l'élément. On remarque que le gap est à 0 on peut lui donner une valeur qui va déterminer l'espacement entre les éléments
Pour transformer un container en flexbox on va là et on clique sur "Flex"
dansla capture d'écran on a créé une flexbox ou tous les éléments vont s'empiler les un sous les autres , se mettre au centre et se caler sur le haut de l'élément. On remarque que le gap est à 0 on peut lui donner une valeur qui va déterminer l'espacement entre les éléments
Expérimentez avec cette élément de test pour comprendre comment ça fonctionne. Sélectionnez l'élément avec le nom de classe "flextest" et modifiez les réglage du flex pour voir et comprendre comment ça se passe.
ATTENTION : vous remarquerez que j'ai donner une largeur à la flexbox : 100% de la largeur du container donc et que ici je lui ai aussi mis une hauteur fixe pour que vous puissiez bien visualiser les réglage.
Pour centrer un bouton par exemple, on le met dans une flexbox qui fera 100% de la largeur de l'élément parent et on règle la flexbox sur center
Pour centrer un bouton par exemple, on le met dans une flexbox qui fera 100% de la largeur de l'élément parent et on règle la flexbox sur center
ATTENTION : pour que la flexbox fonctionne bien il ne faut pas que les élément à l'intérieurs aient des margin "auto" qui les centre car alors , les deux instructions entre en conflict.
LA CHOSE A NE JAMAIS FAIRE.
Il ne faut jamais mettre de marge négative dans l'idée de recaler des éléments
La conséquence c'est que sur l'écran monsieur A ça marche mais sur l'écran de madame B qui est plus petit ou plus grand, ça se décale
et ensuite à cause des marges négatives, les éléments vont se supperposer, c'est exactement ce que quelqu'un avait fait sur le site
La conséquence c'est que sur l'écran monsieur A ça marche mais sur l'écran de madame B qui est plus petit ou plus grand, ça se décale
et ensuite à cause des marges négatives, les éléments vont se supperposer, c'est exactement ce que quelqu'un avait fait sur le site
LA LOGIQUE DES CLASSES
dans webflow chaque éléments à une classe et changer des valeurs sur une élément de la classe machin, va changer les valeurs sur tous les élément "machin" sur tout le site.
dans la capture ci dessous on voit que l'élement avec les classe "Text-base" "center-text" sont 27 sur la page et 491 sur tout le site. Avent de faire un changement sur un élément on fait donc attention aux conséquences.
dans la capture ci dessous on voit que l'élement avec les classe "Text-base" "center-text" sont 27 sur la page et 491 sur tout le site. Avent de faire un changement sur un élément on fait donc attention aux conséquences.
si on veut vraiment faire un modif sur un élément on lui ajoute une classe en cliquant dans le champ avec le nom des classe et on ajoute un nom : là on voit que cet éléménet est unique : "1 on this page" on peut le modifier sans influer sur les autres
