L'image ne centre pas
Résolu
Chazy_chaxxx
Messages postés
106
Date d'inscription
Statut
Membre
Dernière intervention
-
sp00m` -
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 :
Code sur ma feuille CSS:
Pouvez vous m'aider ?
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 ?
A voir également:
- L'image ne centre pas
- Image iso - Guide
- Centre de messagerie - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Légender une image - Guide
15 réponses
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é.
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é.
<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.
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.
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 ?
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;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Elle est centrée de gauche à droite mais par contre elle est tellement haute que je ne voit que la moitiée
Là encore c'est normal puisque tu as défini des marges négatives ! Je pensais que c'était voulu.
Donc, vire tes marges.
Donc, vire tes marges.
Ç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
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
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;
height: 100%;
width: 100%;
vertical-align: middle;
text-align: center;
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 :
CSS :
Voilà t'as plus qu'à faire un copier coller. (j'ai pas testé)
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é)
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:
Code CSS:
Code HTML:
<div id="id-pour-mon-image"> </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 */
}