Les Allergies
Alimentaires
Posez votre question Signaler

[HTML]Centrer une image de haut en bas [Résolu]

Wilbrod 25Messages postés 23 novembre 2005Date d'inscription - Dernière réponse le 2 févr. 2012 à 14:19
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
Lire la suite 

[HTML]Centrer une image de haut en bas »

6 réponses
Réponse
+6
moins plus
Ssylvainsab 2869Messages postés 30 juillet 2006Date d'inscription 30 septembre 2010Dernière intervention 26 sept. 2006 à 18:50
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>

 Ajouter un commentaire
Ssylvainsab - 28 sept. 2006 à 18:29
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.
Ajouter un commentaire
Réponse
+0
moins plus
Wilbrod 25Messages postés 23 novembre 2005Date d'inscription 29 sept. 2006 à 17:28
Merci,
Ca fonctionne a la perfection :)

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
misterp42 2Messages postés 15 août 2011Date d'inscription 27 janvier 2012Dernière intervention 27 janv. 2012 à 13:42
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>

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
pitimick 15Messages postés 1 mars 2011Date d'inscription 2 février 2012Dernière intervention 2 févr. 2012 à 14:00
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?

 Ajouter un commentaire
misterp42 - 2 févr. 2012 à 14:19
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..
Ajouter un commentaire
Posez votre question
Ce document intitulé « [HTML]Centrer une image de haut en bas » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
5 extensions si vous voulez revenir à l'ancien Facebook