[HTML]Centrer une image de haut en bas

[Résolu/Fermé]
Signaler
Messages postés
24
Date d'inscription
mercredi 23 novembre 2005
Statut
Membre
Dernière intervention
21 octobre 2006
-
 TomTom -
Bonjour à tous,
Je suis présentement en train de me construire un site web personnel et j'aimerais bien pouvoir centrer un image autant de gauche à droite que de bas en haut.

Biensûr, pour la centrer de droite à gauche je peux utiliser la balise <center> </center>, mais pour ce qui est de bas en haut je suis dans le vide total.

S'il vous plaît aidez-moi !!!

Wilbrod
A voir également:

4 réponses

Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
820
Salut.

tu peux utiliser la propriété CSs vertical align:middle.
Pour <center></center>, a mon avis c'est vraiment pas la bonne solution.

Choisis plutôt :
<div style="text-align:center;"><img src="image.png" sytle="width:256px:height:256px;vertical-align:middle;" alt="mon image" /></div>
6
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41713 internautes nous ont dit merci ce mois-ci

Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
820
Euh, ou alors si tu ne veux pas de div :
<img src="image.png" sytle="display:block;margin:auto;width:256px:height:256px;vertical-align:middle;" alt="mon image" /></div>


Le display:block transforme ton image en block, c'est a dire qu'il y aura un retour a la ligne.
Le margin:auto; c'est pour que l'image soit centrée.
Messages postés
24
Date d'inscription
mercredi 23 novembre 2005
Statut
Membre
Dernière intervention
21 octobre 2006

Merci,
Ca fonctionne a la perfection :)
Messages postés
3
Date d'inscription
lundi 15 août 2011
Statut
Membre
Dernière intervention
27 janvier 2012

Pour contribution et solution alternative: Un morceau de javascript pour "protéger" vos images en plus ;-)

<html>
<head>
<title>Clic Droit Interdit</title>
<script language="javascript" type="text/javascript">
function copieinterdite(){
alert("Image sous Copyright. Merci de ne pas copier cette image ou d'en demander une autorisation écrite à contact@monsite.com");
return(false);
}
</script>
</head>
<body onContextMenu= copieinterdite();>
<div style="text-align:center;height:50%;background-color:red;top:50%;left:50%;margin-left:-303.5px;margin-top:-172.5px;position:absolute;"><img src="adresse_relative_de_votre_image.jpg" alt="mon image"/>
</div>
</body>
</html>
.... et comme ça quand la personne souhaite faire un "click droit" "ouvrir dans un nouvelle onglet" ton script le block. Au final ça embête plus que autre choses, car si quelqu'un veut vraiment l'image il l'aura, soit avec des outils adéquate, soit juste en regardant dans le code source pour ceux qui savent (et nombreux ils sont)
Rien de plus ignoble qu'un site bloquant les images, personnelement c'est Alt+F4 direct ... ! N'importe qui est maintenant capable de la récupérer car elle est téléchargée sur votre ordinateur pour être visionnée ! D'autant plus que Google Image l'a certainement référencée également !
Messages postés
20
Date d'inscription
mardi 1 mars 2011
Statut
Membre
Dernière intervention
2 février 2012

pour protéger l'image de la copie, il vaut mieux également l'ajouter au cas via du js, comme ca si on desactive js, on n'a pas d'image.

par contre en essayant le code ci-dessus je n'ai pas de centrage vertical. Normal?
Il faut adapter les "margin-left:" et "margin-top:" par rapport à la taille de ta propre image. Pour Info la mienne faisait 607px × 345px. Soit le centre de la largeur = 607/2=303.5px et le centre de la hauteur:345/2=172.5px.
Et si ça ne marche toujours pas, ajouter dans ton css:

img {
display: block;
}

C'est bon ? Ici c'est ok sur ie, ff et opera.
Sinon, étant débutant quelque chose doit m'échapper..