L'image ne centre pas

[Résolu/Fermé]
Signaler
Messages postés
105
Date d'inscription
samedi 24 janvier 2009
Statut
Membre
Dernière intervention
25 octobre 2011
-
 sp00m` -
Bonjour à tous,

Je suis en train de rédigé ma page d'accueil mais je n'arrive pas à centrer l'image.

Code sur ma page html :
<body>
<div id="contenu"><img src="logo accueil copie.png" alt="Logo Sound's Wave" width="830" height="310" border="0" align="middle" /></div>
</body>



Code sur ma feuille CSS:
#contenu{
	position:absolute;
	left: 226px;
	top: 270px;
	margin-left: -415x; /* moitié de la largeur de l'image */
	margin-top: -155px; /* moitié de la hauteur de l'image */
	 } 



Pouvez vous m'aider ?

15 réponses

Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
84
Mets les balises <center></center> de part et d'autre de l'image.

Pour ton css, évite de mettre la position absolute, si le visiteur a une résolution d'écran différent de la tienne ce sera décalé.
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
212
<center> est une balise dépréciée. Il ne faut plus l'utiliser.

C'est l'image ou ton cadre qui ne se centre pas ?
Car si c'est le cadre, c'est normal : on ne peut pas centrer quelque chose qui est en position absolue.
Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
84
Ah zut... c'est sur ce forum qu'on m'avait conseillé les <center>, du coup j'en mets partout...
Bref, merci du conseil ;)
Messages postés
105
Date d'inscription
samedi 24 janvier 2009
Statut
Membre
Dernière intervention
25 octobre 2011
12
Ben je ne sais pas trop, ça m'est égal en faite. Je voudrais juste que l'image apparaisse au milieu de l'écran peu importe la résolution de l'internaute. Est-ce possible ?
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
212
Oui, mais sans position absolue.
#contenu {
	margin-left: -415x; /* moitié de la largeur de l'image */
	margin-top: -155px; /* moitié de la hauteur de l'image */
	text-align:center;
	 } 
Messages postés
105
Date d'inscription
samedi 24 janvier 2009
Statut
Membre
Dernière intervention
25 octobre 2011
12
Elle est centrée de gauche à droite mais par contre elle est tellement haute que je ne voit que la moitiée
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
212
Là encore c'est normal puisque tu as défini des marges négatives ! Je pensais que c'était voulu.
Donc, vire tes marges.
Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
84
et en ajoutant
position:relative;


?
Messages postés
105
Date d'inscription
samedi 24 janvier 2009
Statut
Membre
Dernière intervention
25 octobre 2011
12
Merci, on se rapproche, elle est entière, centrée mais dans le haut de la page...
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
212
Et tu veux qu'elle soit où ? centrée aussi verticalement ?
Messages postés
105
Date d'inscription
samedi 24 janvier 2009
Statut
Membre
Dernière intervention
25 octobre 2011
12
S'il te plait oui
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
212
Ça c'est beaucoup plus difficile !
Vois ce tuto quand même : https://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html

Ou alors il faut la mettre en background
http://css.mammouthland.net/image-de-fond-background-css.php
Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
84
Je sais pas si marche, tu peux tester de mettre l'image dans un tableau avec une seule cellule (sans bordure), et dans le css du tableau :
height: 100%;
width: 100%;
vertical-align: middle;
text-align: center;
Messages postés
105
Date d'inscription
samedi 24 janvier 2009
Statut
Membre
Dernière intervention
25 octobre 2011
12
Et ca serait plus facile de la descendre seulement de qq pixel ? ça me conviendrait amplement
Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
84
Bien sûr tu peux définir un espace en px entre ton image et le haut de la page, pour ça tu fais :
top : 100px;
pour qu'il y ait un espace de 100, par exemple. (la plupart des propriétés css sont ici : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3 )
Mais c'est pas très propre comme code, et si un utilisateur est en 800*600, l'image sera collée en bas, et pour un autre avec une résolution vachement plus grande que la tienne, l'image sera collée en haut.

Si tu veux je te file le code que je ferais à ta place :
HTML :
<table border="0" id="img_centre">
     <tr><td>
          <img src="logo accueil copie.png" alt="Logo Sound's Wave" />
     </td></tr>
</table>


CSS :
#img_centre{
     height: 100%;
     width: 100%;
     vertical-align: middle;
     text-align: center;
}


Voilà t'as plus qu'à faire un copier coller. (j'ai pas testé)
Messages postés
105
Date d'inscription
samedi 24 janvier 2009
Statut
Membre
Dernière intervention
25 octobre 2011
12
L'image ne s'affichait par, je me contente d'un centrage verticale. Merci les gars...
Pour centrer une image verticalement et horizontalement, tu as peut-être cette solution (je considère une image de 600*400):

Code HTML:

<div id="id-pour-mon-image">&nbsp;</div>


Code CSS:

#id-pour-mon-image {
        position: absolute;
        background: #fff url("lien/vers/ton/image.png") top left no-repeat;
        width: 600px;
        height: 400px;
        top: 50%;
        left: 50%;
        margin-left: -300px; /* moins la moitié de la largeur de l'image */
        margin-top: -200px; /* moins la moitié de la heuteur de l'image */
}