L'élément de logo de cette page ne se concentre pas verticalement dans le Le flexbox p> # forum-link code>) est aligné correctement. Align-items: Centre Code> La règle semble fonctionner pour un enfant divisé mais pas l'autre. Pourquoi est-ce le cas et comment le réparez-vous? P>
<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link"><a href="/forum">Join our Forums!</a></div>
</header>
</body>
3 Réponses :
Vous devez spécifier la largeur de vos parents pour elle à centrer verticalement. Puis ajoutez text-align: centre; code>. Modifiez les styles de votre #logo code> et # forum-link code> comme ci-dessous. <body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link"><a href="/forum">Join our Forums!</a></div>
</header>
</body>
Merci. Chaque élément doit être centré verticalement, ce qui signifie qu'il doit être au centre du parent div le long de l'axe vertical. w3schools.com/howto/howto_csss_center-vertical.asp
@Knocksx La seule raison pour laquelle il semble que non centré est à cause des marges que vous apportez sur votre #Logo et # forum-link styles. Si vous le supprimez, ça devrait aller. J'ai édité ma réponse, essayez de le courir.
@Knocksx j'ai mal compris votre problème. Vérifiez mon code modifié ci-dessus. Peut-être que ça va aider.
Umm, je pense que c'est ce que vous êtes après: le logo et le lien sont centrés verticalement sur le BG? Seulement mis à jour pour la solution non mobile.
Aussi, comme je l'ai dit dans mon commentaire, répété ici pour la compréhensif: votre image ne se concentre pas verticalement parce que c'est la hauteur de ses parents: le Le lien a une hauteur inférieure à celle de l'en-tête code>, donc il est donc de centrisme verticalement. P> Si vous êtes En vous référant au 5PX ou à la fois de l'espace, il suffit de lancer un Ma solution donne essentiellement votre corps une hauteur, flexez-la et votre en-tête code code> s'aligne verticalement centrée verticalement. P> p> #logo code> et en-tête code>. p> Affichage: Bloquer Code> sur votre image #Logo code> S pour supprimer cet espacement. Ce sera toujours la hauteur de ses parents cependant. P>
<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link"><a href="/forum">Join our Forums!</a></div>
</header>
</body>
Ajouter Affichage: Bloc; à l'image ne le centriste pas
@Knocksx Non, il supprime l'espacement supplémentaire sous l'image, laissez-le être centré correctement avec d'autres cents CSS.
@Knocksx Pouvez-vous exécuter mon code et voir s'il a l'air de la façon dont vous le voulez? Je n'ai pas décrit tout le style que j'ai changé. Il y a 4-5 bits de CSS différents que j'ai ajoutés. Si cela a l'air de la façon dont vous le souhaitez, vous pouvez comparer les 2 codes pour voir la différence. Je précède brièvement ce que j'ai fait. Et a également expliqué pourquoi votre image n'est pas centrée = il est la même hauteur que l'élément d'en-tête.
Je vois, ne réalisais pas qu'il y avait d'autres changements. Y a-t-il un moyen rapide de faire un diffcheck ici?
@Knocksx Nope, mais peut utiliser diffchecker.com Vous pouvez également inspecter mon code d'exécution et voir les modifications de la structure et travailler à l'envers.
OK, examiné et testé. Certains des éléments que vous suggérez de supprimer ou de changer sont ceux qui rendent le travail de mise en page réactif. C'est ce qui fait que le # Forum-Link div se déplace sous la flexbox et se comporte d'une certaine manière sur mobile. Tous les correctifs devraient prendre en compte le code existant. J'ai mis en œuvre deux de vos suggestions: ajoutez une hauteur fixe de 116px à
@Knocksx Le problème est que je ne sais pas quelle est votre disposition réactive à ressembler. Deuxièmement, vous pouvez annuler n'importe quel style via les requêtes de média (si votre code d'origine fonctionnait bien de manière réactive). Bien que cela semble que vous n'ayez pas une bonne portée sur CSS, peut-être consulter ici pour Flex Box Stuff? CSS-Tricks.com/snippets/css/a-guide-to -flexbox également, comme pour les questions réelles que vous avez posées, elle a été répondue. Si vous posez des choses de manière réactive en outre, cela prolonge la portée qui n'était pas là - peut-être une autre question? Si cela répond à votre (s) question (s), vous devez l'accepter :)
@Knocksx Aussi, utilisez-vous l'inspecteur de DevTools de votre navigateur pour voir comment le style affecte les mises en page des éléments? Cela sera utile. J'ai essentiellement inspecté votre code d'exécution, j'ai supprimé un peu d'espacement, puis ajouté un peu de coiffage pour le faire paraître comme vous avez décrit.
Laissez-nous Continuer cette discussion en chat .
Il suffit d'ajouter p> marge: 0 code> dans Body code>:
<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link"><a href="/forum">Join our Forums!</a></div>
</header>
</body>
Vous devez fournir un exemple de la façon dont il devrait regarder.
@Eternalhour Combien d'explication "alignement vertical" nécessite-t-elle? Avez-vous appuyé sur «Exécution de l'extrait de code»?
Vous n'obtiendrez pas d'aide ici avec des commentaires comme ça, Goodluck.
Tu plaisantes, non? J'ai probablement passé une heure à faire un site Web mock afin que d'autres utilisateurs puissent clairement voir le problème. Il y a d'autres questions ici posant sur l'alignement vertical sans aide visuelle que ce soit, comme celui-ci avec 691 upvotes. Stackoverflow.com/questions/79461/... et vous voterez pour que cette question soit fermée pour "manque de clarté?" C'est un vote malveillant fait de la vengeance et est contre les règles de Stackoverflow.
Pourquoi une fermeture supplémentaire à l'intérieur de
logo div?Ajouter un
Affichage: Bloc; à votreIMG intérieurdiv # logo , la hauteur de l'image est la hauteur duDiv # logo eten-tête , il n'y a donc pas d'espace pour l'aligner verticalement centré sur la verticale que vous l'avez fait avec le lien du forum. Vérifiez-le en inspectant votre code d'exécution. L'élément n'est pas centré verticalement sur le corps car il n'y a pas de CSS spécifiant le faire.