Partage
  • Partager sur Facebook
  • Partager sur Twitter

centrer verticalement un image de taille variable

dans une div bien sûr xD

Sujet résolu
28 février 2011 à 13:56:18

Bonjour à tous,

je suis en train de m'arracher les cheveux, voici mon problème :

je souhaiterai centrer une image dans une div (horizontalement et verticalement), mais si je change la taille de mon image, elle doit toujours rester au centre de ma div.

<div class="main">
<a href="http://www.google.fr"><img src="mon.image"/></a>
</div>


.main {
width:400px;
height:190px;
margin:auto auto auto 1.5em;
text-align:center;
float:left;}

Sachant que je suis obliger d'utiliser float:left; et mon margin:left.

Pour modifier la disposition de mon image, j'utilise la classe css ".main a img".

Est-ce que quelqu'un a une solution ?

Merci
  • Partager sur Facebook
  • Partager sur Twitter
28 février 2011 à 14:00:09

Salut, déjà tu fixe la taille de ton image dans ton code CSS en renseignant sa largeur et sa hauteur. Utilise les %.
  • Partager sur Facebook
  • Partager sur Twitter
28 février 2011 à 14:03:27

Ça ne va pas marcher, la taille de ma div est fixe : 400x190, mais celle de l'image ne l'est pas, en faite il y a un systeme d'upload de l'image, donc la taille de l'image peut changer, et je veux qu'elle reste centrée, peu importe ça taille.

Si je fixe sa taille en %, ça ne marchera que pour cette image non ?
  • Partager sur Facebook
  • Partager sur Twitter
28 février 2011 à 14:17:28

Si tu utilise max-width / max-height et min-width / min-height ?
  • Partager sur Facebook
  • Partager sur Twitter
28 février 2011 à 14:28:49

non, comment je m'en sers ?

En gros, est-ce que quelqu'un peut me proposer le contenu pour ma classe

.main a img { }

merci
  • Partager sur Facebook
  • Partager sur Twitter
28 février 2011 à 16:09:59

Horizontalement, elle est déjà centrée, non ? Oo'
  • Partager sur Facebook
  • Partager sur Twitter
28 février 2011 à 16:12:58

oui, c'est verticalement que ça pose problème : /
  • Partager sur Facebook
  • Partager sur Twitter
28 février 2011 à 16:14:39

Tu veux que ton image soit centrée verticalement, c'est à dire que le centre de ton image soit au centre de ta div ou que ce soit le haut de l'image qui soit centrée dans ta div ?

Edit: non okay, j'ai compris le problème ^^je regarde ça.
  • Partager sur Facebook
  • Partager sur Twitter
28 février 2011 à 16:15:41

Le centrage vertical n'est disponible qu'avec un tableau si je ne m'abuse non ? En css 2 du moins.
  • Partager sur Facebook
  • Partager sur Twitter
28 février 2011 à 16:18:38

ouai ouai faut que le centre de mon image soit au centre de ma div. Après peu importe la version de css, tant que j'ai une solution qui marche ^^
  • Partager sur Facebook
  • Partager sur Twitter
3 mars 2011 à 15:26:00

Je continue à gratter mais je n'ai toujours pas trouver la solution, quelqu'un a une idée ??
  • Partager sur Facebook
  • Partager sur Twitter
3 mars 2011 à 15:27:40

Franchement j'ai réfléchis pendant un moment et je vois pas...A mon avis il faut intégrer du php ou du java parce que la taille de image est variable..
  • Partager sur Facebook
  • Partager sur Twitter
3 mars 2011 à 15:28:08

Si tu connais la hauteur de ton <div> tu as juste a lui attribuer un line-height inférieur de 5px environ.
Si ça ne suffit pas rajoute vertical-align:middle; sur le lien et/ou l'image.
  • Partager sur Facebook
  • Partager sur Twitter
Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.
3 mars 2011 à 17:13:05

Tu peux ajuster la hauteur de la ligne en appliquant un line-height = à la hauteur de ton conteneur et appliquer un vertical-align:middle à ton image.
IE6 a besoin d'un élément tampon doté d'un display:inline-block (tu peux le placer entre commentaires conditionnels) afin de l'aligner par rapport à l'image, essaye ce code:

.main {
width:400px;
height:190px;
line-height:190px;
margin:auto auto auto 1.5em;
text-align:center;
float:left;}

.main img { vertical-align:middle }

.tampon { display:inline-block }


<div class="main">
	<!--[if IE 6]><span class="tampon"></span><![endif]-->
	<img src="tonimage.ext" alt="" />
</div>
  • Partager sur Facebook
  • Partager sur Twitter
3 mars 2011 à 17:32:50

non rien à faire, ça ne fonctionne pas.
Je pense que c'est tout simplement impossible de centrer une image de taille variable verticalement en css.... -_-'
Dommage !
  • Partager sur Facebook
  • Partager sur Twitter
3 mars 2011 à 17:34:21

Ben si, c'est possible.
Poste ton code.
  • Partager sur Facebook
  • Partager sur Twitter
3 mars 2011 à 17:43:03

Mon code est le même que celui de mon premier post, plus le line-height et le vertical-align. Ca marche avec un texte, mais pas avec une image !

<div class="main">
<a href="http://www.google.fr"><img src="mon.image"/></a>
</div>


.main {
width:400px;
height:190px;
margin:auto auto auto 1.5em;
text-align:center;
float:left;
line-height:190px;}

.main a img {
vertical-align:middle
}


J'ai testé de changer les class en id, d'utiliser l'image en background, mais ça ne bouge pas :)
  • Partager sur Facebook
  • Partager sur Twitter
3 mars 2011 à 17:46:57

Étrange, tu es probablement en mode Quirks.
As-tu un doctype complet et valide?
  • Partager sur Facebook
  • Partager sur Twitter
3 mars 2011 à 20:13:35

Je vais regarder, et c'est quoi le mode Quirks ??
  • Partager sur Facebook
  • Partager sur Twitter
8 mars 2011 à 13:47:36

Bon alors voilà la solution, l'important est donc de mettre une "line-height" identique au "height" dans la classe principale, et d'appliquer sur l'image un "vertical-align:center;".

Voici mon code pour exemple :

<div class="main">
<a href="http://www.google.fr"><img src="mon.image"/></a>
</div>


.main {
	width: 400px;
	height:190px;
	margin:auto auto auto 1.5em;
	text-align: center;
	float:left;
	line-height:190px;
	background-color:black;
}
.main a img {
	vertical-align:middle;
}


En tout cas, merci pour votre aide.
  • Partager sur Facebook
  • Partager sur Twitter
8 mars 2011 à 13:59:41

Citation : loun4st4ck

Tu peux ajuster la hauteur de la ligne en appliquant un line-height = à la hauteur de ton conteneur et appliquer un vertical-align:middle à ton image.


Citation : Soonn

Bon alors voilà la solution, l'important est donc de mettre une "line-height" identique au "height" dans la classe principale, et d'appliquer sur l'image un "vertical-align:center;".


  • Partager sur Facebook
  • Partager sur Twitter
22 mars 2011 à 8:42:01

Ouai ^^ je sais mais j'ai préféré remettre le code propre, car au début il y avait quelques chose qui bloqué ! Mais oui c'est bien toi qui ma sauvé ma vie xD

Encore merci
  • Partager sur Facebook
  • Partager sur Twitter
24 mai 2018 à 15:39:10

.main {
    width: 400px;
    height:190px;
    margin:auto auto auto 1.5em;
    text-align: center;
    float:left;
    line-height:190px;
    background-color:black;
}
.main a img {
    vertical-align:middle;
}

-
Edité par MaximeDéom 24 mai 2018 à 15:40:11

  • Partager sur Facebook
  • Partager sur Twitter
24 mai 2018 à 15:55:45

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.

Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Déterrage

Citation des règles générales du forum :

Avant de poster, demandez-vous si ce que vous allez dire apporte quelque chose au sujet. Si votre message n'apporte rien, vous ferez perdre du temps à tout le monde et le sujet pourrait dévier ou devenir difficile à suivre.

Aussi, vérifiez la date du topic. Le déterrage de topic nuit au bon fonctionnement du forum et est interdit. Utilisez les boutons pouce en haut pour dire merci. Si le topic date de plus de deux mois sans réponses, mieux vaut ne pas répondre. Si vous avez une question similaire, créez plutôt votre propre sujet en détaillant votre contexte

Je ferme ce sujet.



  • Partager sur Facebook
  • Partager sur Twitter