Centrer verticalement le contenu d'un Div

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Centrer verticalement le contenu d'un Div

Message par xDoonie Sam 18 Mai 2019 - 16:38

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.

Angel


Dernière édition par xDoonie le Lun 20 Mai 2019 - 18:46, édité 1 fois
xDoonie

xDoonie
Nouveau membre

Messages : 2
Inscrit(e) le : 18/05/2019

Voir le profil de l'utilisateur http://marvel-new-dawn.forumactif.com
xDoonie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer verticalement le contenu d'un Div

Message par Scoubifitz Sam 18 Mai 2019 - 19:05

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>

Hi
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3679
Inscrit(e) le : 18/03/2008

Voir le profil de l'utilisateur http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer verticalement le contenu d'un Div

Message par xDoonie Sam 18 Mai 2019 - 19:36

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 !

Affirmatif
xDoonie

xDoonie
Nouveau membre

Messages : 2
Inscrit(e) le : 18/05/2019

Voir le profil de l'utilisateur http://marvel-new-dawn.forumactif.com
xDoonie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer verticalement le contenu d'un Div

Message par Chacha Ven 24 Mai 2019 - 9:50

Centrer verticalement le contenu d'un Div 4qhGdLE
Bienvenue sur le forum de support de Forumactif

Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser :
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.
Centrer verticalement le contenu d'un Div UmaslZ4Bonjour,

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

Chacha
Modéractif
Modéractif

Masculin
Messages : 67174
Inscrit(e) le : 21/08/2010

Voir le profil de l'utilisateur https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer verticalement le contenu d'un Div

Message par Chacha Sam 25 Mai 2019 - 10:06

Centrer verticalement le contenu d'un Div 8djze9qBonjour,

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

Chacha
Modéractif
Modéractif

Masculin
Messages : 67174
Inscrit(e) le : 21/08/2010

Voir le profil de l'utilisateur https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum