21 réponses à ce sujet

[EzecKiel]

Bonjour et bonne année !

Petite question : Comment fait-on pour centrer une image verticalement (Je précise, l'image se situe dans un <div>style_emoticons/default/wink.gif ?

J'ai naturellement essayer la propriété vertical-align mais c'est comme si je pissais dans un violon çà ne fait rien. :'(

[Ben_J]

Hum, dans ton css, tu précise :

.img { 
 vertical-align: center;
}

Et tu l'appele ensuite avec ton div.

Voila.
Edit : Pfiou, si je fais des fautes dans le code en plus...
Pis faut que je regarde ; tu avais déjà essayer.

Ce message a été édité par Ben_J le 31/12/2003

[EzecKiel]

c'est une classe qui s'appelle img c'est çà  ???

Et dans mon code HTML je mets div class="img" ???

[Moe]

J'ai trouvé un petit tutorial, mais impossible de trouver une solution simple pour Mozilla et IE.
C'est un problème ardu. Tu es sûr que tu as besoin de ça ?
Et le truc de Ben_J, je vois pas ce que ça apporte, vu qu'un élément est toujours placé en haut de l'élément parent. :]
Edit : la taille de ton<div>, elle est fixée ou bien ?
(si oui, on doit pouvoir trouver une solution)
Pour un cadre dont la taille est fixe, c'est pas trop dur : voir ici.
Problème
: faut réajuster suivant la taille de l'image et du conteneur. Mais ça
marche sous Mozilla Firebird 0.7, et IE 5.0 à 6.0.


Ce message a été édité par Moe le 31/12/2003

[zekibgs]

Salut, je sais si ça pourra t'aider pour ton problème, mais je pense qu'une petite adaptation du tutorial sur le centrage horizontal grâce aux marges négatives peut peut-être marcher, m'enfin bon j'ai pas testé donc je préfère pas trop m'avancer.

Voilà le lien : Blue-Robot

[cedric]

Une idée en passant:

background: url(image.jpg) center no-repeat;[/quote]

• Retour en haut

[bwets]

une autre solution consiste a utiliser une table, du genre

<div>
   <table style="height:100%;width:100%">
  <tr><td valign="middle"><img src="..." /></td></tr>
   </table§>
</div>

bonne année

[nolan]

Désolé mais le centrage vertical d'un élement - sous-entendu de manière dynamique - est toujours le graal du design full css..

[EzecKiel]

Merci pour vos réponses.

Sinon la taille de mon div est fixe mais pas forcément celee de mon image.

En effet peut-être que le fait de mettre l'image en background et centrer l'image serait la solution.

Merci en tout cas et Bonne année !

[Moe]

Mhhh ça a l'air bien ça : bingo !.
(en espérant qu'on puisse l'appliquer à autre chose qu'au body, au pire, ça sera utile à quelqu'un )

[nolan]

Citation

Mhhh ça a l'air bien ça : bingo !.
(en espérant qu'on puisse l'appliquer à autre chose qu'au body, au pire, ça sera utile à quelqu'un )

hahaha

Le problème c'est que ton objet n'existe pas dans le flux : )

Si tu veux construire quelque chose autour ou centre un paragraphe ça marchera po (même si ça résoud certains problèmes particuliers hein)

[Nakuni]

Désolé de remonter un post vieux de 2004, mais vu qu'il se trouve premier sur google pour "centrer image verticalement css" je me dis que ma réponse pourrait aider des internautes!

Bref pour centrer verticalement une image dont on ne connaît pas la taille j'ai écris un petit billet sur mon blog que vous pouvez voir ici: Centrer une image verticalement avec PHP et CSS (oui par contre ça demande d'utiliser PHP)

Désolé pour la pub, mais encore une fois je pense que ça pourra vraiment servir à certains .

Modifié par Nakuni, 01 November 2009 - 22:23.

[filobilo]

Bonjour,

Devoir migrer son site sur php pour aligner une image..... un peu fastidieux comme manip.
Le background fonctionne, mais c'est pas pratique(image non visible dans l'html, pas de lien possible, ni de hover (ou en css, mais la c'est la loose)...).
Le tableau fonctionne aussi mais c'est dommage de revenir à ces méthodes que le css essaie de nous faire oublier sur nos constructions.

Un contournement consiste à appliquer une marge négative sur ton image, la taille du conteneur et ta police te donneront la valeur,tu prépares ton code et déplace ton image avec le firebug pour trouver ton positionnement souhaité.(par exemple)
<p><img src="ton image" style="margin-bottom:-4px;" /></p>

Ça fonctionne sur tous les principaux navigateurs, c'est je trouve une solution des plus élégantes sans bidouille.

[Rabban]

Un detterage d'un post de plus d'un an qui déterrait un post de 5 ans avant... c'est beau.

Sinon les marge négatives, c'est de la bidouille et ce n'est jamais élégant.

[Nakuni]

Et puis ma solution c'est pour quand on ne connait pas la taille de l'image (par exemple images envoyées par l'utilisateur), donc difficile de la placer avec firebug (ou alors j'ai mal compris).

[filobilo]

Citation

Un detterage d'un post de plus d'un an qui déterrait un post de 5 ans avant... c'est beau.

Sinon les marge négatives, c'est de la bidouille et ce n'est jamais élégant.

je recherche une solution, je tombe sur le post (entre autre), je repond.

Parce que là, c'est bien beau de critiquer, mais si c'est pour pas apporter de meilleurs solutions, ça sert à rien.

Citation

Et puis ma solution c'est pour quand on ne connait pas la taille de l'image (par exemple images envoyées par l'utilisateur), donc difficile de la placer avec firebug (ou alors j'ai mal compris).

ce n'est pas la taille de l'image qui compte, mais son conteneur la marge, positive ou négative permettra juste de centrer par rapport au conteneur.

Modifié par filobilo, 28 May 2010 - 13:13.

[Kobee1203]

J'ai essayé sur http://www.w3schools...ground-position en remplaçant le code déjà présent par ce qu'il y a en dessous et ça à l'air de fonctionner sur IE 6, firefox 8.0.1 et sur Chrome 16 :

<html>
<head>
<style type="text/css">
html, body {
	height: 98%;
}
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:center;
min-height: 100%;
height: auto !important;
height: 100%;
}
</style>
</head>

<body>
<div></div>
</body>
</html>

Je rajoute le height sur html et body parce que sinon ça ne fonctionne pas bien sur firefox, et je le mets à 98% parce que si je mets au dessus Firefox m'affiche une scrollbar.
Peut être que sur les anciennes versions de firefox le comportement était différent.
Si d'autres personnes peuvent tester sur d'autres versions de IE et sur d'autres navigateurs (Opera, Safari), ça peut être intéressant.

[Drakulls]

salut^^ t'as pas du lire la date du premier post. Et ensuite faut arreter la, c'est du CSS de base.

Modifié par Drakulls, 18 January 2012 - 19:31.

[Histrion]

Kobee1203 gagne un niveau en déterrage de thread !

[TaZattaK]

Joli déterrage même, ça en a uppé le page rank (keywords="css centrer image verticalement" ) --'

[wackselwease]

va peut être falloir arreter l'excavation là

[PERECil]

GZ.fr du topic de qualitay \o/. On en peut rien si on est super bien référencé . On est le stack overflow fr ici.