L'image ne centre pasRésolu/Fermé

Question

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: #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 ?

Kopros · Answer

Mets les balises 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é.

notobe · Answer

<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.

Chazy_chaxxx · Answer

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 ?

notobe · Answer

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;
	 }

Chazy_chaxxx · Answer

Elle est centrée de gauche à droite mais par contre elle est tellement haute que je ne voit que la moitiée

notobe · Answer

Là encore c'est normal puisque tu as défini des marges négatives ! Je pensais que c'était voulu.
Donc, vire tes marges.

Kopros · Answer

et en ajoutant
position:relative;

?

Chazy_chaxxx · Answer

Merci, on se rapproche, elle est entière, centrée mais dans le haut de la page...

notobe · Answer

Et tu veux qu'elle soit où ? centrée aussi verticalement ?

Chazy_chaxxx · Answer

S'il te plait oui

notobe · Answer

Ç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

Kopros · Answer

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;

Chazy_chaxxx · Answer

Et ca serait plus facile de la descendre seulement de qq pixel ? ça me conviendrait amplement

Kopros · Answer

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 : #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é)

Chazy_chaxxx · Answer

L'image ne s'affichait par, je me contente d'un centrage verticale. Merci les gars...

L'image ne centre pas

15 réponses

Discussions similaires

Newsletters