Centrage d'image.

Bonjour,

Je parviens parfaitement a centrer mon image horizontalement et verticalement ds mon bloc avec ce code :

#imageBox {
	width:300px;
	height:300px;
	background-color:#969;
	display: table-cell;
	vertical-align: middle;
	text-align:center;
}

Mais ce bloc doit être placé a la droite d'un autre bloc et pour ce faire, je rajoute ds #imageBox

float:left;

et la plus d'alignement vertical.

Où est l'astuce ???

Merci

Bonjour,

Le problème vient peut-être du fait que si tu fais flotter ton bloc, il ne peut plus fonctionner comme une cellule de tableau (display: table-cell). Cependant, j'aurais plutôt tendance à penser que le display: table-cell devrait prendre le dessus, et que le float: left devrait être purement et simplement ignoré.

Enfin, ça dépend aussi du navigateur utilisé pour les tests. Si c'est Internet Explorer 7, par exemple, qui ne supporte pas display: table-cell, ça ne va pas aider.

Sauf si tu te fiches du support de IE6-7, le display: table-cell n'est pas une solution utilisable à l'heure actuelle.
Il y a la solution suivante, qui est un peu bricolée (notamment pour le support d'IE6), mais qui peut t'être utile:
http://covertprestige.info/test/46-centrer-image-conteneur-fixe.html

Sinon, utiliser un tableau de mise en page.

bonjour,
sinon je te propose cette page , http://gcyrillus.free.fr/essai/testdroite-gauche-inline-block.html qui se veut de mettre en evidence l'usage de display:inline-block; conjointement a direction lorsque l'on veut conserver un alignement vertical , s'affranchir de tableau ou des flottements tout en conservant les caractéristiques visuelles de ces 2 derniers comportement .

la notions de flottement , comme je l'entend, ancre un conteneur a gauche ou a droite aprés un saut de ligne , ce conteneur se trouve extrait du flux naturel de la page et n'existe a nouveau dans le flux que par son contenu , en fait si les elements adjacent n'ont pas de contexte de formatage particulier (ou haslayout dans IE ) , ce n'est que le contenu de cet element flottant qui est perçu par les contenues des autres elements sinon l'elements conteneurs est perçu (voir contexte de formatage/haslayout) . On se trouve en quelquesorte a mi chemin entre un positionnement absolue et un positionnement dans le flux avec un conteneur qui serait en partie de type inline-block mais en conservant un comportement de type block (faite flotter un span et vous pouvez le dimensionner en perdant l'alignement vertical).

Le concept est certes difficile a appréhender mais bizzarement tout le monde sait en faire usage .... mais pas le décrire , ??? ...

GC

Merci pour toute ces infos, je vais voir si ca peu m'aider.
Entre temps, j'ai trouvé un plugin jQuery qui fonctionne parfaitement sur IE 7 et FF 3. Voici le lien : http://www.nealgrosskopf.com/tech/thread.asp?pid=37
Dite moi ce que vous en pensez...

Autre chose, existe t'il un moyen de tester le comportement de ses pages ds des navigateurs antérieurs ???

Merci

sogood84 a écrit :
http://www.nealgrosskopf.com/tech/thread.asp?pid=37
Dite moi ce que vous en pensez...

C'est pas terrible, à oublier.

sogood84 a écrit :
existe t'il un moyen de tester le comportement de ses pages ds des navigateurs antérieurs ?

Installer les navigateurs en question.
Cf. Installer différents navigateurs pour tester vos pages.

Voir aussi:
Tester en ligne sous IE8/IE7/IE6, Firefox, Safari, Chrome et Opera.
Modifié par Florent V. (15 Mar 2009 - 19:44)

Merci pour les liens, c'est ce que je cherchai !!!

a écrit :
C'est pas terrible, à oublier.

Pourquoi ???
Ça fonctionne parfaitement avec IE 6 et 7 et FF 3