[Résolu] Je n’arrive pas à centrer une image utilisant la fonction par défaut (Créer un compte)

  • Statut : non résolu
7 sujets de 1 à 7 (sur un total de 7)
  • Auteur
    Messages
  • #512068
    Darloup
    Participant
    Chevalier WordPress
    219 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 3.4.1
    – Version de PHP/MySQL :
    – Thème utilisé : 1024px
    – Extensions en place : Entre autres, TinyMCE Advanced
    – Nom de l’hebergeur : Dreamlink.net
    – Adresse du site : http://www.darloup.com/blog/

    Problème(s) rencontré(s) :

    Je n’arrive pas à centrer une image en utilisant la fonction par défaut de WP, à savoir “Ajouter un média” – c’est l’unique option qui se trouve au dessus de la fenêtre de composition.

    Pourtant, dans “Alignement”, je sélectionne bien “Centre”.

    D’ailleurs, voici le code généré pour mon dernier article :

    [caption id="" align="aligncenter" width="630"]<img title="Perquisition surprise dans la prison de Riohacha !" src="http://www.darloup.com/chemin de l'image" alt="" width="630" height="430" /> Perquisition surprise dans la prison de Riohacha ![/caption]

    A la prévisualisation, l’image est bien centrée à l’écran. Lorsque je la publie, elle est alignée à gauche.

    La seule façon de l’aligner à l’écran est de rajouter la balise center. Donc mon code définitif devient :

    <center><br />
    [caption id="" align="aligncenter" width="630"]<img title="Perquisition surprise dans la prison de Riohacha !" src="http://www.darloup.com/blog/pix/carcel01.jpg" alt="" width="630" height="430" /> Perquisition surprise dans la prison de Riohacha ![/caption]<br />
    </center>

    J’avoue ne pas comprendre l’origine du problème !

    Merci d’avance de vos suggestions !

    H.

    #842830
    Guy
    Participant
    Maître WordPress
    14817 contributions

    C’est le shortcode qui ajoute la classe wp-caption, cette classe modifie les marges et rend inopérante le aligncenter.

    dans le css, il est défini ainsi:

    .wp-caption {
        background-color: #F3F3F3;
        border: 1px solid #DDDDDD;
        border-radius: 3px 3px 3px 3px;
        margin: 10px;
        padding-top: 4px;
        text-align: center;
    }

    il faudrait le modifier :

    .wp-caption {
        background-color: #F3F3F3;
        border: 1px solid #DDDDDD;
        border-radius: 3px 3px 3px 3px;
        /* margin: 10px; */
        padding-top: 4px;
        text-align: center;
    }

    il faut faire un tour partout dans le site pour s’assurer que cette modification n’ait pas cassé la mise en forme d’autres éléments.

    #842831
    Darloup
    Participant
    Chevalier WordPress
    219 contributions

    Bonjour Guy et merci de ta réponse,

    Es-tu en train de me dire que c’est mon fichier css qui est la cause du problème et qui, par défaut, modifie le code de base html généré par l’éditeur de WP ?

    Et que, pour résoudre le problème, je dois modifier le fichier css en enlevant la ligne:

    margin: 10px;

    Merci d’avance !

    Henry

    #842832
    Guy
    Participant
    Maître WordPress
    14817 contributions

    Oui, j’ai l’impression que c’est dans le css que tu régleras cela, mais il faut que tu le mettes en oeuvre pour en être certain.
    Sinon, ce n’est pas le css qui modifie ce que l’éditeur a dit, mais le css du thème qui a défini ses classes et identificateurs ainsi. L’éditeur, dans ce cas là, ne fait que dire on va se servir de telle classe et c’est le thème qui est chargé de le faire.

    #842833
    Darloup
    Participant
    Chevalier WordPress
    219 contributions

    Bonjour Guy,

    Bon, j’ai regardé dans le fichier style.css de mon thème, et voici ce que j’ai trouvé :

    /* WP image align classes */
    .aligncenter {display:block; margin-left:auto; margin-right:auto;}
    .alignleft {float:left;}
    .alignright {float:right;}
    .wp-caption {border:1px solid #ddd;	text-align:center; background-color:#f3f3f3; padding-top:4px; margin:10px; border-radius:3px;}
    .wp-caption img {margin:0; padding:0; border:0 none;}
    .wp-caption-dd {font-size: 11px; line-height: 17px; padding:0 4px 5px; margin:0;}

    Pourrais-tu avoir la gentillesse de me dire ce que je suis censé modifier afin que l’éditeur de WP puisse fonctionner correctement ?

    Cordialement,

    Henry

    #842834
    Guy
    Participant
    Maître WordPress
    14817 contributions

    je crois te l’avoir dit dans un de mes messages précédents, il faut mettre margin: 10px; en commentaire dans la classe wp-caption

    #842835
    Darloup
    Participant
    Chevalier WordPress
    219 contributions

    Bonjour Guy,

    Désolé, j’aurais dû faire plus attention à ce que tu as écrit :rolleyes:

    J’ai donc enlevé le margin: 10px; de la ligne de .wp-caption.

    Puis je suis revenu à mon article et j’ai enlevé la balise center ne laissant donc que le code original laissé par WP (voir mon premier message ci-dessous).

    Après avoir mis à jour la publication, je suis retourné sur mon blog où, hélas, mon image s’était positionné sur la gauche…

    Mais, me rappelant de ce que j’avais lu quelque part, j’ai fais un F5, suivi d’un controle+F5 pour vider le cache de mon navigateur et, miracle !, l’image s’est recentrée sans avoir eu à utiliser la balise center !

    Ton tuyau fonctionne donc superbement et je te remercie sincèrement d’avoir pris le temps de partager tes connaissances !

    Bonne continuation ! 🍺

    Henry

7 sujets de 1 à 7 (sur un total de 7)
  • Vous devez être connecté pour répondre à ce sujet.