[HTML]Centrer une image de haut en bas
Résolu
Wilbrod
Messages postés
24
Date d'inscription
Statut
Membre
Dernière intervention
-
TomTom -
TomTom -
A voir également:
- Centrer une image css
- Image iso - Guide
- Légender une image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Transformer une image en icone - Guide
4 réponses
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 :
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>
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>
<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)
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?
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..
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..
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.