Centrer verticalement le contenu d'un Div

[xDoonie]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Lien du forum :

Description du problème

Bonjour,

Je m'essaie à une ébauche de code, je fais de premiers essais et pour qu'ils soient concluants je souhaiterai pouvoir centrer verticalement tout le contenu du DIV, donc que les deux icons et le texte à côté soient parfaitement centrés dans la barre marron.

Voici le code que j'ai essayé d'utiliser :

Code:

<div style="width:400px;  height:40px; line-height:40px; vertical-align: middle; display:inline-block; background-color:#cc9966; border-radius: 30px; padding: 0px 20px 0px 20px; font-size: 11px; color:#000000; "><img src="https://i.servimg.com/u/f26/20/07/19/19/spider10.jpg" style="border-radius:30px;" /> <img src="https://i.servimg.com/u/f26/20/07/19/19/tomhic10.jpg" style="border-radius:30px; margin-right: 20px;" /> Peter Parker x Spider-Man → ft. Tom Holland (NN)</div>

Je fais des recherches depuis tout à l'heure, j'ai essayé des mix de toutes les solutions que j'arrive à grappiller à gauche à droite: changer la valeur de line-height, utiliser em au lieu de px, des display: table-cell, inline-block... Rien n'y fait, je n'ai jamais réussi à faire bouger quoi que ce soit.

Je vous remercie par avance si vous pouvez m'aider.

[Scoubifitz]

Bonsoir,

L'idéal est de centrer le texte par rapport au contenant (line-height) , et de centrer l'image par rapport au texte (vertical-align) .

Code:

<div style="width:400px; height:40px; line-height:38px; display:inline-block; background-color:#cc9966; border-radius: 30px; padding: 0px 20px 0px 20px; font-size: 11px; color:#000000; "><img src="https://i.servimg.com/u/f26/20/07/19/19/spider10.jpg" style="border-radius:30px;vertical-align:middle" /> <img src="https://i.servimg.com/u/f26/20/07/19/19/tomhic10.jpg" style="border-radius:30px; margin-right: 20px;vertical-align:middle" /> Peter Parker x Spider-Man → ft. Tom Holland (NN)</div>


[xDoonie]

Bonsoir,

C'est génial, merci beaucoup pour cette réponse rapide !

J'ai essayé de trouver des infos sur ces codes précis pour comprendre un petit peu le pourquoi du comment...

Si je comprends bien, le line-height permet de définir la hauteur que prend ma ligne à l'intérieur de mon div ? Est-ce qu'il centre automatiquement le texte au milieu de cette hauteur que je définis ? Ça expliquerait qu'il centre verticalement mon texte si je mets un line-height = height ?

Si j'ai bien compris l'utilité du display:inline-block dans mon cas précis il permet l'utilisation du vertical-align, et ce dernier sert à aligner mon image sur le milieu de la line-height (avec la valeur middle) que j'ai défini dans le div. Donc je n'avais aucun intérêt à l'utiliser dans le div global, il s'applique sur un élément en particulier que je veux ajuster par rapport à la hauteur de ligne ?

Je suis désolé pour toutes ces questions, je ne sais pas si elles sont très claires ou correctement formulées mais je préfère comprendre ce que je fais.

Merci encore pour l'aide !

[Chacha]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.