Centrage relatif?

Bonsoir.

Je possède une image tout ce qu'il y a de plus classique (cette image a toujours la même taille)

<img title="" alt="" src="images/aa.png" id="productid_1">

J'inclus cette image dans un div qui doit petre draggable.

<div class="drag" id="xx"><img title="" alt="" src="images/aa.png" id="productid_1"></div>

Ensuite sous cette image j'ai une zone de texte que j'ai mis dans un span, qui est toujours contenu dans mon div draggable.

<span class="edit">qqfsdfsdfqsd</span>

Ma zone draggable contient donc mon image + mon texte.

Comment faire pour que mon image se centre par rapport au texte du dessous; en effet pour le moment mon texte commence au même niveau que l"image du dessus et si il est long il dépasse sur la droite, ce qui n'est pas très esthétique?

Merci
Modifié par marseille (15 Jun 2010 - 12:48)

Bonjour,

Dans le CSS de ton div, as tu tenter de mettre un :

text-align:center;

?

Cette propriété aura pour effet de centrer le contenu de ton bloc draggable.

En espérant t'avoir aider

Leorilan a écrit :
Bonjour,

Dans le CSS de ton div, as tu tenter de mettre un :

text-align:center;

?

Cette propriété aura pour effet de centrer le contenu de ton bloc draggable.

En espérant t'avoir aider

J'avais déjà tenté, mais c'est un peux plus compliqué que cela.

Dans ce cas, peux tu nous mettre un bout de code CSS concernant le bloc DIV et l'image ?
Cela nous permettrait de comprendre un peu mieux je pense

Leorilan a écrit :
Dans ce cas, peux tu nous mettre un bout de code CSS concernant le bloc DIV et l'image ?
Cela nous permettrait de comprendre un peu mieux je pense

J'ai cela pour le moment

.drag { width: 50px; /*text-align:center;*/}

Rien de plus rien de moins, après j'avais tenté de jouer avec le text-align:center a différents endroits mais sans succès.

Mais mon problème est peux être du au fait que je fixe la taille de mon .drag mais je suis un peux obligé sachant que j'ai plusieurs élements draggable dans un même container et donc faut que leur zone soit réduite.

Mais bon je dois surement mal m'y prendre.

Salut,

Vu que ta sélection se fait à l'aide d'une classe, n'as tu pas quelque part ailleurs dans ta feuille de style une sélection faite à l'aide d'un sélecteur prioritaire, à savoir un identifiant, auquel est attribué un alignement de texte différent ?

Mikachu a écrit :
Salut,

Vu que ta sélection se fait à l'aide d'une classe, n'as tu pas quelque part ailleurs dans ta feuille de style une sélection faite à l'aide d'un sélecteur prioritaire, à savoir un identifiant, auquel est attribué un alignement de texte différent ?

Non du tout, j'ai bien vérifié avec firebug.

Une page en ligne ?

Mikachu a écrit :
Une page en ligne ?

Bon j'ai mis cela en ligne http://omannu.free.fr/ je pense ne rien avoir oublié.

Ok c'est plus clair...

Donc en fait : les images sont des éléments en lignes, et le texte bien évidemment aussi. Donc même si tu saute une ligne dans ton code, ces éléments se trouveront à la suite les uns et les autres.

Dans ton cas, même si tu mets le text en alignement centré, ça ne fonctionne pas car ton "faux texte" (privilégier toujours de vrais mots et pas un enchainement de caractères sans espaces qui correspondent à une situation inexistante dans des conditions réelles).

Cela ne fonctionne pas tout simplement car ton texte trop long passe automatiquement à la ligne, mais virtuellement, il aurait rempli toute la ligne ou se trouve l'image, donc celle ci se retrouve quand même à gauche.

Tu as plusieurs solutions, c'est soit d'ajouter un <br /> entre tes balises <img> et <span>, forcant ainsi le passage à la ligne. En mettant ensuite un text-align: center ton image sera bien centrée dans la largeur du bloc.

L'autre possibilité, peut être plus propre car elle n'oblige pas d'ajouter des balises dans le code html à des fins de présentation, sera de passe les images en display: block avec des marges latérales automatiques, et d'ajouter un text-align: center au texte.

Tu auras ainsi une css de ce style :

.drag {width:100px; text-align: center; }
.drag img {display: block; margin: 0 auto;}

(j'ai volontairement augmenté la largeur de ton bloc car l'image faisant 50px de large elle aussi, tu ne verrais pas la différence sinon.

Ok merci ca marche.

Une dernière petite précision, mon div drag doit être le plus petit possible (borné donc par la taille du texte car c'est ce dernier qui sera toujours plus long que l'image).

Comment faire pour le width du drag; en effet dans l'exemple on le fixe alors qu'il faudrait qu'il soit dynamique et donc ayant un width correspondant au texte.

J'espère que l'on m'a compris