centrer une image dans un div Résolu

Question

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

HelloWorld · Accepted Answer

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

colas31 · Answer

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.

colas31 · Answer

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.

colas31 · Answer

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.

colas31 · Answer

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 ?

colas31 · Answer

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 ?

colas31 · Answer

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

colas31 · Answer

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

Hanabi · Answer

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 :

ton contenue

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

dreamweaver newbie · Answer

Hanabi ça fait un an que tu as posté cela mais MERCIIIII

safi · Answer

float: left;
position: absolute;
left: 30%;
top: 30%;
width:40%;
height:40%;

its greattttttt

Centrer une image dans un div

11 réponses

Discussions similaires

Newsletters