28172 sujets

CSS et mise en forme, CSS3

Bien le bonjour!

Voilà, j'ai une simple div, centrée à l'aide de margin right et left auto.

Mais biensur, lorsque que l'on diminue la taille d'affichage, une fois que l'image est arrivée à sont margin-left minimum (donc à l'extrême gauche), le centrage s'arrête, et donc l'image se calle sur la gauche.

Y aurait t'il y moyen de centrer autrement ? Afin que le centrage se fasse par rapport au centre de l'image et non à son point de registration? Ou changer le point de registration?
J'ai un logique dérivée de AS3 qui me dicte:

left: (body.width/2)-(image.width/2);

Ce qui n'est malheureusement pas une syntaxe css Smiley smile

Vous auriez une idée? (En espérant m'être fait compris ^^)
Modifié par Docxell (09 Mar 2012 - 13:30)
Docxell a écrit :
Center l'image elle même ? Que veux tu dire ?

Centrer l'image de la même façon qu'on peut centrer un élément de bloc.
Docxell a écrit :
Tu veux dire en <img src=""> et ensuite centrer avec un text-align ?

Pas avec text-align (cela ne marchera pas), mais avec des marges automatiques accompagnées d'un display: block.
Une div n'est pas par défaut un élément block ?

En tout cas je fonctionne déjà avec les margin auto, et comme je disais, une fois la marge de gauche à zéro, l'élément arrête de se center..
Là, je n'ai pas parlé de l'élément div, mais de l'élément img (qui, par nature, est de type en ligne remplacé).
J'ai résolu le problème de cette façon:

J'ai placé ma div à la moitié de ma page (top:50%;)
Vu que le point de registration d'une div est par défaut au dessus à gauche, elle s'affiche à présent dans la deuxième moitié de ma page.

Il suffit alors de lui dire de se décaler vers la gauche de la moitié de la valeur de sa largeur.
L'astuce est d'utiliser le margin. (margin-left:-valeur_de_mon_width_divisé_en_deux;)

Il est dommage que css ne gère pas les calculs du type: top: 50%-(width/2);