Cet article est destiné à détailler, pas à pas, comment placer une image d'illustration au sein d'un texte. Le texte d'accompagnement (titre + complément d'info sur l'image  étant placé en dessous).

En utilisant uniquement les boutons de l’Éditeur, et en observant l'évolution du code source

          .  .  .  .  .  .  .  

1) ajouter une image (ici une image de taille 310x310 qui était dans la médiathèque)

2) dans le code source créé il y a cette écriture :

<p><img src="http://ekladata.com/KaUtRztgd89PeBd8ce-YImbZKG8.png" alt="" width="310" height="310" /></p>

3)  Mettre du texte sous l'image :
Par exemple "Étalage de fruits" suivi de "Petit commerce local" et de "Photo d'illustration 310 x 310 px" :

3-1  Sélectionner l'image en cliquant dessus : (elle apparait grisé en bleu, avec des petits carrés sur le pourtour)

3-2   Placer le point d'insertion à droite de l'image (en cliquant à sa droite ou avec la flèche droite du clavier) pour être positionné dans le paragraphe qui contient l'image seule.

3-4   Faire un retour à la ligne (Appui maintenu sur la touche Majuscule + Appui bref sur la touche Entrée) et écrire Étalage de fruits

3-5   Faire un retour à la ligne (comme ci-dessus) et écrire Petit commerce local

3-6   Faire un retour à la ligne (comme ci-dessus) et écrire "Photo d'illustration 310 x 310 px

3-7  Quitter le paragraphe (Une action sur la seule touche Entrée).

4)  Résultat et Ajustement

↪ 4-1  A cette étape, dans le code source, figure ce code html :

<p><img src="http://ekladata.com/KaUtRztgd89PeBd8ce-YImbZKG8.png" alt="" width="310" height="310" /><br /><strong><span style="color: #0000ff;">&Eacute;talage de fruits<br /></span></strong><span style="color: #0000ff;">Petit commerce local<br /></span><em>Photo d'illustration 310 x 310 px</em><strong></strong><br /><br /></p>

Dans l'éditeur, apparait cet affichage.
Dans le blog la disposition est identique .

:

↪ 4-2   Pour centrer l'ensemble image + texte, il suffit de faire un clic sur le texte et un autre sur le bouton "Aligner au centre", cette action va ajouter style="text-align: center;" dans la balise <p> au début du code.

Étalage de fruits
Petit commerce local
Photo d'illustration 310 x 310 px

 Code final, (en gris clair ce qui concerne le texte ajouté et en vert ce qui concerne l'image choisie) :

 <p style="text-align: center;"><img src="http://ekladata.com/KaUtRztgd89PeBd8ce-YImbZKG8.png" alt="" width="310" height="310" /><br /><strong><span style="color: #0000ff;">&Eacute;talage de fruits<br /></span></strong><span style="color: #0000ff;">Petit commerce local<br /></span><em>Photo d'illustration 310 x 310 px</em><strong></strong><br /><br /></p>

Pour résumer comment faire:

1) Placer l'image dans un paragraphe.

2) Après l'image faire un retour à la ligne pour mettre le texte (par exemple un titre). 
Nota : avec le clavier c'est Ctrl + Maj et dans le code source c'est codé <br /> 

3) cliquer sur le texte puis sur le bouton "Aligner au centre"

Le code de cet exemple est réutilisable par copié-collé dans le code source, il suffira de modifier après <br />  ce qui est en vert et en gris