Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • PHP5 avancé
  • Memento MySQL
  • Memento CSS 3
  • WordPress 3 100% pratique
  • Memento HTML5
Auteur
Docxell
#
79 Posts
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)

^
Victor BRITO
#
Des adieux à jamais
3154 Posts
Salut,

Un passage par les tutoriels te montrera celui sur la gestion des débordements en CSS, en l'occurrence le débordement de ton image. Explore la piste de la propriété max-width.

Autre solution : centrer l'image elle-même.

Adieu jusqu'à la prochaine fois… Salut.
« Docteur Jekyll un jour a compris que c'est ce monsieur Hyde qu'on aimait en lui. Mister Hyde, ce salaud, a fait la peau, la peau du docteur Jekyll. »

^
Docxell
#
79 Posts
Center l'image elle même ? Que veux tu dire ?

^
Victor BRITO
#
Des adieux à jamais
3154 Posts
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.

Adieu jusqu'à la prochaine fois… Salut.
« Docteur Jekyll un jour a compris que c'est ce monsieur Hyde qu'on aimait en lui. Mister Hyde, ce salaud, a fait la peau, la peau du docteur Jekyll. »

^
Docxell
#
79 Posts
Tu veux dire en <img src=""> et ensuite centrer avec un text-align ?

^
Victor BRITO
#
Des adieux à jamais
3154 Posts
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.

Adieu jusqu'à la prochaine fois… Salut.
« Docteur Jekyll un jour a compris que c'est ce monsieur Hyde qu'on aimait en lui. Mister Hyde, ce salaud, a fait la peau, la peau du docteur Jekyll. »

^
Docxell
#
79 Posts
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..

^
Victor BRITO
#
Des adieux à jamais
3154 Posts
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é).

Adieu jusqu'à la prochaine fois… Salut.
« Docteur Jekyll un jour a compris que c'est ce monsieur Hyde qu'on aimait en lui. Mister Hyde, ce salaud, a fait la peau, la peau du docteur Jekyll. »

^
Docxell
#
79 Posts
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);

^