HELP! align-items buggé
Spatia
-
Utilisateur anonyme -
Utilisateur anonyme -
cela fait plusieurs heures que j'essais d'aligner mes flexbox au centre de ma page mais cela ne marche pas
je voudrais mettre mes 2 flexbox au centre de ma page internet, mais seulement le justifiy-content fonctionne, et non le align-items
code css:
.master {
display: flex;
justify-content: center;
align-items: center;
}
.clickbox {
color:#8FDFCB;
border: 5px Solid;
border-color:#8FDFCB;
background-color:#BDFFE1;
font-size: 55px;
margin: 5px;
height: 140px;
width: 450px;
text-align: center;
font-family: "Righteous";
HTML:
<div class="master"> <div class="clickbox"><a href="Sanctuaires.html">Carte de tous les sanctuaires</a></div> <div class="clickbox">Le meilleur stuff a avoir</div> </div>
mais ça me fait cela:
http://image.noelshack.com/fichiers/2019/09/6/1551559823-capture-d-ecran-2019-03-02-a-21-42-17.png
et je ne parle meme pas de quand je met le flex-direction en column: seulement le align-items fonctionne, et cela me fait le meme résultat que plus haut.
Mon problème vient donc de l'alignement vertical, qui ne fonctionne pas.
Merci d'avance,
Spatia
EDIT : Ajout des balises de code
EDIT2 : Ajout de l'image directement dans la discussion
Configuration: Macintosh / Safari 12.0.3
A voir également:
- HELP! align-items buggé
- Mon ordinateur a buggé - Guide
- Outlook duplicate items remover (odir) - Télécharger - Mail
- Setting items on this screen to incorrect values may cause system to malfunction - Forum Windows
- Scroll buggé sur souris Logitech G502 - Forum souris / Touchpad
- Wpe pro Dofus - Edit Items - Forum Logiciels
1 réponse
Bonjour
L'alignement vertical fonctionne très bien, et si ce n'est pas ce que tu attendais, c'est qu'il y a quelque chose que tu as mal compris quelque part.
Si tu croyais que
https://developer.mozilla.org/fr/docs/Web/CSS/align-items
L'alignement vertical fonctionne très bien, et si ce n'est pas ce que tu attendais, c'est qu'il y a quelque chose que tu as mal compris quelque part.
Si tu croyais que
align-items: center;allait mettre tes deux clickbox l'une en-dessous de l'autre, c'est que tu n'as pas compris à quoi ça sert :
https://developer.mozilla.org/fr/docs/Web/CSS/align-items
tout d'abord merci pour ta réponse.
Je savais déjà que pour les lettres l'un en dessous de l'autre il faut utiliser flex-direction.
Mon problème étant que je n'arrive pas à, verticalement, à mettre ces 2 flexbox au centre de mon site:
en gros je cherche a mettre ces 2 dernières au centre de mon site verticalement et horizontalement, mais je n'arrive pas à effectuer cette action en vertical.
Spatia
Mais ça centre à l'intérieur du parent, c'est à dire dans ton div master.
Et ce div master n'a pas de hauteur définie. Par défaut les div occupent toute la largeur dont ils disposent , c'est pourquoi en centrant horizontalement par rapport à ton div master, tu centres aussi par rapport à l'écran.
Mais verticalement, le div master ne prend par défaut que la hauteur dont il a besoin - celle des div ckickbox.
Si tu veux qu'il occupe toute la hauteur de l'écran, ajoute-lui un . - en espérant qu'il n'y a rien au-dessus. Alors le centrage vertical sur div master correspondra bien à un centrage vertical dans l'écran.
ca marche !
Une prochaine fois, quand tu n'arrives pas à faire ce que tu veux, ne dis pas qu'une fonctionnalité est buggée. Dis simplement que tu n'y arrives pas, il n'y a pas de mal à ça.