J'essaie de déplacer une image (map.png), mais je ne peux pas le déplacer.
mon code HTML est: p> mon code CSS est: P> .map {
position: relative;
top: 20px;
}
3 Réponses :
Assurez-vous que votre image est dans le bon répertoire et le type de fichier est correct. Pour centrer l'image et assurez-vous qu'il apparaît quelque part sur votre page Web, vous pouvez ajouter ce CSS
.map {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
J'ai essayé cela, c'était centré mais pas verticalement, sur horizontalement. J'ai même ajouté la ligne "Top: 100px" (pour tester si elle est montée) mais rien ne s'est passé.
Je ne suis toujours pas sûr de ce que vous essayez réellement de réaliser. HOperver que je vous ai pris de code et réécrit de manière à ce que votre image soit centrée verticalement et horizontalement. Vous pouvez ajouter n'importe quel CSS que vous voulez dans la classe HTML P> Contenu Code>. .flex-display {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;
}
.image-content {
// Write your image styling here if needed
}
.map {
position: absolute;
top: 20px;
}
Où essayez-vous de déplacer l'image? Voulez-vous l'image sur le côté droit du document? Ou voulez-vous l'image de 25 pixels de la gauche du document?
Pourquoi avez-vous l'IMG enveloppé dans un
? Et pourquoi est-ce H3 aligné non? L'image déborde-t-elle le div? Si l'image est plus grande que le conteneur (DIV), déplacez un bit le conteneur pour ne pas déplacer l'image. Aussi, vous avez une fermeture supplémentaire
tag dans votre extrait.@Twomarktwo J'essaie de bouger l'image, pas à gauche, je viens de dire que là-bas pour me rendre plus facile pour moi aussi voir si elle bougeait.
@gibberish je l'ai fait pour aligner l'image.
@Tylerwolf devtools (F12) est votre meilleur ami pour résoudre ce genre de problème. Si vous n'êtes pas à l'aise d'utiliser, apprenez cela devrait être votre première priorité. La réponse de Stefan Joseph est une bonne (+1) - Flexbox et CSSGrid sont les moyens les plus faciles d'aligner les éléments HTML. Flexbox est facile et ça marche. mais devtools ... Regardez tous les tutoriels vidéo que vous pouvez sur ce sujet. Vous vous remercierez plus tard.