Salut tout le monde,
un problème assez embêtant se pose à moi.
En effet, je voudrais centrer les images présentent dans les news de mon site, gérées via php et syntaxe wiki.
 
Il m'est impossible d'utiliser le text-align: center; vu que je ne peux pas encadrer les images d'un div.
 
Je ne peux donc qu'appliquer un style à chaque image, et j'ai essayé pas mal de chose sans succès.
 
Si quelqu'un a une idée, elle serait la bienvenue, merci .

Tu as essayé ça:
 

 
?

Oui, c'est d'ailleurs ce que j'ai essayé en premier, les images se centrent bien, mais les une en dessous des autres.
 
En gros ça fait une colonne centrée.

He oui, on arrive très vite aux limites du CSS (dès la deuxième ligne!).
Je ne vois pas d'autre solution que de trifouiller dans le générateur PHP/Wiki pour encadrer les images d'un div.

 
Euh sorry j'ai pas exactement compris ce que tu entendais par "image centrée" alors...?
Tu voudrais qu'il y ait plusieures images sur une ligne, mais qu'elles soient centrées dans la page ?
Tu connais à l'avance le nombre d'images en largeur et ce nombre est fixe quelque soit les modifs de la taille de la fenêtre du navigateur?
Tu peux attribuer un style différent à chaque image ?
 
edit:
 
Oublie mes question , Mon idée était la suivante (pour autant que j'aie compris le problème cette fois):
- additionner le width des images sur une ligne. Ex: 100px + 200px + 150px = 450px + 60px de padding pour faire joli (10px de chaque côté) = 510px
- positionner toutes les images en relative et left 50%, attribuer à la première un margin-left de -255 (510/2)
 
 
ça donnerait ceci pour mon exemple:
 

 
Mais bon IE foire sur ce coup là

Bah, je veux que mes images soit centrés sur la même ligne.
Genre j'ai une news avec deux images cote à cote (séparées par un espace), j'aimerai qu'elles soient centrées l'une à côté de l'autre, sur la même ligne.
Je ne connais pas à l'avance le nombre d'image vu que ça change à chaque news, et je ne peux pas attribuer un style différent par image.

 
Oky bon, là, je pense que c'est mort

C'est pas possible, il doit bien y avoir un moyen de centrer mes images
 
Pitsy => ta technique dans ton edit ne fonctionne pas, je ne peux pas changer la css à chaque news, ni préciser la taille des images.
D'ailleurs les images n'ont pas forcément la même taille d'une news à l'autre.

 
Vivi je sais bien que cela ne va pas, j'ai édité avant l'autre réponse.
 
Je me doutais bien que la taille change etc... c'était au cas où tu pouvais donner un css précis à une image précise. Tu dis aussi que c'est généré par php, tu pouvais donc peut-être aussi lui faire calculer le css d'après la taille des images. Comme je ne sais pas exactement à quoi tu as accès ou non, j'aurais essayé...
 
Bref, bonne chance ! (pas sûr que ça suffise )

J'ai accès à tout vu que c'est codé avec mes petites mimines .
 
T'as même le lien dans ma signature si tu veux voir ce que ça donne (avec les images pas centrées ).

Et... pourquoi tu ne pourrait pas ajouter un div autour des images+textes?

Bah je peux ajouter un div autour des images +textes, mais dans ce cas le texte sera centré lui aussi non ?

voui, sauf si.. tu mets le texte dans un autre div. me trompe-je?
PS: ou tu laisse tomber les divs et tu mets des tables

Je peux pas séparer le texte des images puisque tout le texte et les images sont contenus ensemble dans la bdd.

 
Mais arf!!!  
Je croyais que tu ne pouvais pas du tout toucher à la structure html moi...    
 
Comme suggéré par nargy, tu mets, par exemple, un div autour de tes images avec un
 

et dans ton css
 

 
Quelque chose come ça tu peux ?
 

 
Euh, là je ne vois pas le raport avec la choucroute ni le blem vu que tu codes tout toi-même    
Je dois être trop fatiguée; je vais me coucher, bonne nuit
 
et j'espère que nargy pourra t'aider

Ben... tu as toujours les expression régulières qui peuvent venir à ton secours:
<img[^>]*>
 
Si tu fait du PHP par exemple:
ereg_replace("(<img[^>]*> )","<div class=img>\\1</div>" );

Bon, en gros voilà comme ça se passe

 
Donc, chaque news est contenu dans la bdd, et elle est enregistrer au format wiki.
 
Ensuite, le petit bout de code php appelle ma news.
Je ne peux pas rajouter de div ou quoi que se soit dans la news (celle qui contient le texte ET les url des images), mais autour si.
 
Compris ou pas ?

 
Via la configuration de wikirender je peux très bien entourer chaque image d'un div, ça c'est tout à fait faisable.
Mais je trouve cette solution un peu ballot parce que si j'ai 5 images j'aurais 5 div.
 
Enfin bon, en dernier recours...

Heu...

Sauf si, tu n'utilise pas <<echo>> mais une autre fonction Lambda d'une bibliothèque Bêta. Auquel cas, il faut bidouiller Lambda.

> Enfin bon, en dernier recours...
ouais, c'est le CSS.

 
Pas besoin d'une regexp, je peux le faire directement dans la conf wikirender, mais c'est juste que ça va me foutre pleins de div partout (une par image en fait).

bon
normalement chaque news est au moins dans un bloc
tu centres ce bloc avec text-align center
et normalement ton texte est dans des <p> et eux se bouffent un text-align:left
 
et tes images sont centrees et ton texte a gauche

Ouais, c'est tout à fait faisable ça.
Super sale, mais tout à fait faisable .

sale ?

En fait c'est pas faisable car les images aussi sont entre <p></p>

Petite explication sur le <<text-align:center>>
C'est un attribut qui fonctionne sur un conteneur. Par exemple un <div> ou un <p>. Donc, ça n'a pas d'effet sur une image, si ce n'est de centrer le texte alternatif (rêve pas, les navigateurs ne l'ont pas implémenté).
 
Tu ne peut donc pas t'en sortir sans mettre ton image dans un conteneur.
 
Comme tu utilise une fonction qui te génère plus ou moins le code HTML, c'est cette fonction que tu doit modifier, afin de lui faire prendre en compte que l'image doit être dans un conteneur particulier avec au moins une classe CSS définie.
 
J'en revient donc à mon point de départ:

 
Et non, ce n'est pas sale. Pense aux fleurs....

 
 
ben c est ca qui est sale
pas ma solution
tes images n ont rien a foutre dans des paragraphes    
 
et non les images n ont pas a etre encadrées dans un div il y a deja un div qui gere tout ca
une image est un bloc en soi pas besoin d en rajouter

C'est la syntaxe wikirender qui les encadre dans un paragraphe, j'y peux rien moi...
 
Je sais pas si je suis capable de trifouiller le code pour modifier ça...
 
Par contre, je peux modifier la config pour entourer chaque image d'un div, mais il y aura autant de div que d'image.

bah pas grave on va t aider a modifier ton script wiki
t as plusieurs fichiers ou un seul ?

J'ai deux fichier, wikirender.conf.php et wikirender.lib.php.
 
Vous pouvez télécharger le script ici.

bon pas sur de moi du tout
 

 
dans le conf ligne 49
 
tu remplaces par  
 

 
je vais faire quelques tests chez moi
(en fait j hésite entre image et img donc essaie les deux et ca risque de foutre le bordel mais essaie quand meme ca sera facile de revenir en arriere )
 

Bon, c'est aucun des deux noms, je cherche.
 
Edit : bon en fait c'est normal, pour l'instant elle n'existe pas cette classe.
Il faut en quelque sorte supprimer le fonction de génération des images dans la première partie du script et ensuite créer une classe WRB_image dans la seconde partie.

bon en fait il me faudrait une bonne semaine pour analyser le code
j arrive pas a voir non plus quand il entoure les images
enfin perso je trouve quand meme la gestion du bouzin assez etrange ^^;
mais j ai trouvé une sorte de bug que tu pourrais utiliser
si tu mets un espace *en debut de ligne* ca fait un <pre> au lieu d un <p>
donc tu t'arranges pour que tes images soient dans un <pre> dans ta css tu fous un text-align:center sur pre
et bingo ^^
 
edit:
ouais j avais pas calculé tout de suite qu il fallait une class pour les elements de bloctags
en fait je pensais que c etait juste une liste des elements qui ne doivent pas etre wrappés par un <p> ou un <pre>

Nous faudrait quelqu'un qui s'y connaît bien en php pour modifier le code de wikirender.

dans la fonction wikibuildimage($contents, $attr), du fichier de conf, à la fin tu retourne:

et le tour est joué!

C'est ce que je propose depuis le début, mais ça va me foutre pleins de div, c'est crade

Ah ah, trop bon.
Quand j'entoure la balise img d'un div avec la propriété text-align: center, les images sont bien centrées, mais en colonne, comme avec :
 
img {display:block; margin:0 auto;}
 
La seule différence c'est qu'elles sont espacées les unes des autres.
 
Je désespère...

bah evidemment ca regle pas le probleme
 
t as bien lu ma soluce ?
 
edit avant les remarques:
oui c est du bricolage mais en meme temps avec le code que genere ton script hein

Bah, j'ai pas encore essayé le truc du pre, mais si je pouvais éviter .
 
Enfin, en dernier recours si sa fonctionne...

je sais, c est semantiquement hideux
meme si c est pas pire qu un <p> entre nous
 
apres y a peut etre moyen de faire plus propre en js
mais je debute dans le domaine je pourrais pas t aider beaucoup
 
et pour ce qui est de modifier le script a la mano honnetement j ai pas le courage de m y plonger
ils ont pas un forum ?
il pourraient peut etre t aider