HELP! align-items buggé

Fermé

Spatia - Modifié le 2 mars 2019 à 22:19
Utilisateur anonyme - 3 mars 2019 à 13:44

Bonjour,
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
Html input text align ✓ - Forum HTML
Récupération des items. - Forum Minecraft
C'est quoi un items?? c# - Forum C#
Mon pc a buggé - Guide

1 réponse

Réponse 1 / 1

Utilisateur anonyme
2 mars 2019 à 23:20

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

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

Spatia
3 mars 2019 à 00:45

Bonjour,
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

Utilisateur anonyme
Modifié le 3 mars 2019 à 10:32

Pour une flexbox à alignement horizontal (sans flex-direction: column), le align-items centre bien le contenu verticalement, il n'y a aucun bug.
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

height: 100vh ;

. - 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.

Spatia
3 mars 2019 à 13:02

Merci beaucoup !!!
ca marche !

Utilisateur anonyme
3 mars 2019 à 13:44

Tant mieux :-)

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.

Discussions similaires

<p align="center"> en XHTML Strict

"Bios has been reset.." quel choix faire ensuite

Avis site DHgate .

Formulaire PHP, centré et aligné.

Définition du terme "item"