Centrer une image dans un div [Résolu/Fermé]

Signaler
Messages postés
48
Date d'inscription
mardi 1 avril 2008
Statut
Membre
Dernière intervention
10 avril 2009
-
 HelloWorld -
Bonjour,

suite à une question sans succès, j'en tente une autre. j'en ai encore plein de toutes façons :p

donc, j'ai un div et une image dedans. et je n'arrive pas à la centrer verticalement !
vertical-align autant que je veux, ça ne marche pas, margin:auto sur l'image non plus, ...


après plein de tests différents,je ne trouve toujours pas ce qui bloque. aidez-moi !!!

le css de mon div :

.news {
height:275px;
margin-right: 20px;
margin-left:320px;
margin-bottom:20px;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:800;
letter-spacing:normal;
text-align:center;
}


11 réponses

Salut à toutes et tous :)
Pour centrer l'élément :

1 - verticalement seulement :

div{
width: 150px;
height: 150px;
background-color: #aaa;
display: table-cell;
vertical-align: middle;

}

2 - horizontalement seulement :

div{
width: 150px;
height: 150px;
background-color: #aaa;
text-align: center;

}

3 - horizontalement et verticalement (au centre):
div{
width: 150px;
height: 150px;
background-color: #aaa;
text-align: center;
display: table-cell;
vertical-align: middle;


}
4
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 76687 internautes nous ont dit merci ce mois-ci

Messages postés
135
Date d'inscription
samedi 5 août 2006
Statut
Membre
Dernière intervention
21 décembre 2010
17
Bonjour,

Je vais essayer de t'aider sans garantie de fonctionnement.
essayant en definissant ton div avec " display: block;" et tu redefinit un div spécialement concu pour ton image :
.img
{
float: left;
display: block;
width: 55%;
height:auto;
text-align: center;
}

voila un exemple , que j'utilise sur mon site et qui fonctionne

Mias normelemtn si c'est une petite image ca de devrait pas poser de probleme elle devrait ce centrer toute seul avec le text-align : center.

Donne l'adresse de ton site pour voir exactement ce qui va pas.
Messages postés
48
Date d'inscription
mardi 1 avril 2008
Statut
Membre
Dernière intervention
10 avril 2009
11
ça ne marche pas :s

l'image n'est non seulement plus centrée verticalement, mais horizontalement non plus.

en fait tiens :
http://www.agence-pict.com/test/affichage_photos.php?fichier_photos=3D_promotion&id=Axo%20Sarlat%20copie.jpg

(fais pas gaffe à la gueule du site, c'est moche et c'est normal)

et quand tu cliques sur une image du bandeau, ça t'en fais apparaitre une en plus grand : c'est celle ci que je veux centrer dans mon div (qui a une bordure, pour mieux le voir).



merci de ta réponse en tout cas ;)
Salut je me permet de résoudre se problème même si il est daté de avril 2008 (tient sa fait un an pil poil ^_^ !).

Pour centrer n'importe quoi (se que tu veux), n'utilise pas div et fait ceci :

<p align="center">ton contenue</p>

Et c'est assuré que sa marche !!!

Si j'ai réouvert se topic c'est pour se qui comme moi vont tomber dessus, car il est bien réferencé !
Messages postés
135
Date d'inscription
samedi 5 août 2006
Statut
Membre
Dernière intervention
21 décembre 2010
17
Tu aura besoin d'un div spécial pour ton image .
Rentre ceci dans le div qui va contiendra le div de ton image
position :relative;

dans le div de ton image :
position: absolute;
essaie de jouer avec soit le padding-top et buttom : en auto ou essaye avec top: 5px; a peut pret .

Je te dis par rapport a ce que j'ai deja pu faire.
Messages postés
48
Date d'inscription
mardi 1 avril 2008
Statut
Membre
Dernière intervention
10 avril 2009
11
le problème c'est qu'en fonction de la résolution de l'écran, les éléments de mon site bougent. donc si je met un top:5px, sur une résolution fine, mon image va être collée au bord de mon div.

en fait mon problème pour résumer 2 topics que j'ai fais,

soit je veux pouvoir dire : mon div (ou tableau si jamais besoin) dois faire 100% de hauteur et mon image centrée dedans en hauteur (pas encore trouvé pour le 100%, mais déjà je suis bloquée au niveau du centrage vertical alors...)

soit je veux que mon div se centre tout court en fonction de la taille de mon écran (du javascript peut-être, mais j'y connais rien en javascript)

:s
Messages postés
135
Date d'inscription
samedi 5 août 2006
Statut
Membre
Dernière intervention
21 décembre 2010
17
d'accord , dans ce cas il faut que tu travaille tout en pourcentage ca sera plus pratique et ca ne bougera pas. Mais c'est plus long.
et avec padding-top et buttom : en auto ca n'a rien changé ?
padding-top: auto
padding-buttom: auto
margin-top: auto
margin-buttom: auto

essaye ces 4 ensemble. mais c'est pas dis car moi resoudre mes problem de marge je suis obliger de les faire fonctionner ensemble.
Messages postés
48
Date d'inscription
mardi 1 avril 2008
Statut
Membre
Dernière intervention
10 avril 2009
11
mmh non ça ne marche pas plus :s rien ne change.

je travaille en pourcentage, le problème c'est que si je ne spécifie pas une hauteur en pixel, le div ne respecte pas le pourcentage fixé et "remonte" se coller à mon image... je ne parviens pas à le forcer à rester "ouvert" même s'il contient du vide. du coup il faudrait que je le centre lui au lieu de centrer l'image. mais comme dit, je ne connais pas le javascript..
Messages postés
135
Date d'inscription
samedi 5 août 2006
Statut
Membre
Dernière intervention
21 décembre 2010
17
Pour le div qui contient donne lui une hauteur et largeur en pixel .

Mais celui dont tu me parle c'est celui avec le cadre bleu ou noir ?
Messages postés
48
Date d'inscription
mardi 1 avril 2008
Statut
Membre
Dernière intervention
10 avril 2009
11
le cadre noir

(le bleu autour de l'image c'est parce que l'image est un lien, je vais mettre le div de l'image en rouge pour pas qu'on se mélange, là il est pas visible)

donc c'est bien le cadre extérieur que je voudrais forcer à rester en pourcentage (là il est en pixel fixes) pour que le div de l'image se centre dedans ^^

Messages postés
135
Date d'inscription
samedi 5 août 2006
Statut
Membre
Dernière intervention
21 décembre 2010
17
en le definnisant comme siot : display: block; et en pourcentage il devrait rester ouvert non ?
Mais le probleme c'est que tu as des images aussi trop grandes pour le cadre ?
Messages postés
48
Date d'inscription
mardi 1 avril 2008
Statut
Membre
Dernière intervention
10 avril 2009
11
non, il remonte toujours, même avec le display :s

et pour le cadre, le noir est aussi grand que possible donc mes images rentrent dedans (il se resserre même autour alors..) et pour le cadre rouge, mes images font au max 275 sur 550, et mon cadre rouge fait 280 sur 555.
donc tout rentre...
Messages postés
135
Date d'inscription
samedi 5 août 2006
Statut
Membre
Dernière intervention
21 décembre 2010
17
En effet ca ne doit pas poser de probleme.
Essai avec cet article : http://forum.alsacreations.com/faq/faq-3-Comment-centrer-verticalement-un-element-.html
Messages postés
48
Date d'inscription
mardi 1 avril 2008
Statut
Membre
Dernière intervention
10 avril 2009
11
bon eh bien après de nombreuses tentatives infructueuses, j'ai fini par mettre mon div contenant l'image dans un tableau lui même contenu dans le div noir. ça marche, ça fait un truc bizarre mais ça marche, mon image est centrée par rapport à mon tableau.

en fait mon div noir lui ne bouge pas, je lui ai mis 100px de haut (100ou 1000 ça change rien mon tableau se centre pas verticalement dedans) par contre l'image se centre par rapport au tableau qui, sous ie, pousse le div, et sous ff, passe par dessus.

au final, il me reste à trouver comment faire pour que mon tableau reste ouvert en pourcentage ou alors que j'arrive à calculer combien il doit faire de haut selon la taille de l'écran ^^ (j'ai pas fini de m'amuser...)


merci pour ton aide en tout cas !! :D
Messages postés
135
Date d'inscription
samedi 5 août 2006
Statut
Membre
Dernière intervention
21 décembre 2010
17
Pas de probleme de désole de n'avoir pas pu t'aider comme tu le souhaitait.

BOnne continuation ;)

Hanabi ça fait un an que tu as posté cela mais MERCIIIII
float: left;
position: absolute;
left: 30%;
top: 30%;
width:40%;
height:40%;

its greattttttt