Rechercher : dans
Par :

Centrer une image dans un div

Dernière réponse le 2 avr 2009 à 11:38:43 kaelhula, le 1 avr 2008 à 14:55:55 
 Signaler ce message aux modérateurs

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


haha hahahaha

Meilleures réponses pour « centrer une image dans un div » dans :
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Windows 7: Le centre de maintenance VoirUne nouveauté dans Windows 7 est le centre de maintenance, semblable au centre de sécurité de Windows XP et Vista, il regroupe plus de paramètres et permet de régler des problèmes, gérer la sauvegarde, les mises à jour,... Comment y accéder? Pour...
Créer une DIV avec transparence VoirLes DIV transparents en CSS Vous voulez rendre une DIV transparente ? Rien de plus simple, il suffit d'utiliser une des techniques CSS suivantes : Rendre le DIV ainsi que le contenu transparent Le div lui même sera transparent, mais aussi...

1

colas31, le 1 avr 2008 à 15:21:31

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.

Répondre à colas31

2

kaelhula, le 1 avr 2008 à 15:27:48

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

(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 ;)
haha hahahaha

Répondre à kaelhula

3

colas31, le 1 avr 2008 à 15:33:50

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.

Répondre à colas31

4

kaelhula, le 1 avr 2008 à 15:42:27

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 haha hahahaha

Répondre à kaelhula

5

colas31, le 1 avr 2008 à 15:46: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.

Répondre à colas31

6

kaelhula, le 1 avr 2008 à 15:54:46

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

Répondre à kaelhula

7

colas31, le 1 avr 2008 à 15:59:14

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 ?

Répondre à colas31

8

kaelhula, le 1 avr 2008 à 16:02:46

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

haha hahahaha

Répondre à kaelhula

9

colas31, le 1 avr 2008 à 16:05:33

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 ?

Répondre à colas31

10

kaelhula, le 1 avr 2008 à 16:09:33

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

Répondre à kaelhula

11

colas31, le 1 avr 2008 à 16:15:18

En effet ca ne doit pas poser de probleme.
Essai avec cet article : http://forum.alsacreations.com/...

Répondre à colas31

12

kaelhula, le 1 avr 2008 à 16:41:49

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
haha hahahaha

Répondre à kaelhula

13

colas31, le 1 avr 2008 à 16:45:51

Pas de probleme de désole de n'avoir pas pu t'aider comme tu le souhaitait.

BOnne continuation ;)

Répondre à colas31

14

 Hanabi, le 2 avr 2009 à 11:38:43

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é !

Répondre à Hanabi