Comment aligner des images dans un post?

Si vous utilisez Blogger, vous avez du certainement remarquer qu'il n'est pas facile d'aligner horizontalement des images dans un article. Si vous utilisez les options proposées par blogger (left, right, center), ca ne marche pas, les images ne sont jamais alignées. Pourquoi les images ne s'alignent-elles pas? et comment faire pour obtenir un bel alignement?

Comment aligner horizontalement des images dans un post? 

Tout d'abord, essayons de comprendre le problème en partant d'un exemple. Insérons dans cet article 3 images, la première alignée sur la gauche, la deuxième centrée et la troisième, alignée à droite. Voici le résultat:

Pourquoi les images sont-elles décalées? Voici le code généré par Blogger lors de l'insertion de la première image (vous pouvez le voir dans l'éditeur html):

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOk2tWsKzo2Fcesx4uMAM1XAekhBUeKsHih9gx474_c414FJhg3ay0xA0agkvY6D3j2Ik0Nj3jgop97J2uyKZEpVAMgAF1Vxl17YHza3bzaKOmPt4UxMMU_TzCGfF_iQuCPZCkzdEJ9Cs/s1600/how-to-align-photos-part1.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOk2tWsKzo2Fcesx4uMAM1XAekhBUeKsHih9gx474_c414FJhg3ay0xA0agkvY6D3j2Ik0Nj3jgop97J2uyKZEpVAMgAF1Vxl17YHza3bzaKOmPt4UxMMU_TzCGfF_iQuCPZCkzdEJ9Cs/s1600/how-to-align-photos-part1.JPG" height="320" width="94" />
</a>
</div>


Comme vous pouvez le voir une balise <div>  avec un style "clear: both" a été ajoutée automatiquement par Blogger. Cette propriété interdit à tout élément qui viendrait par la suite de flotter à droite ou à gauche de la photo. A chaque insertion d'image, on a donc des balises <div...> et </div> avec un style css qui les empèchent de s'aligner. La solution pour aligner les images est donc simple. Il suffit d'effacer les balises <div...> et </div> générées par Blogger entre les images. Pour être certain que rien ne viendra géner l'alignement de nos 3 images, on conservera la balise <div...> ajoutée par Blogger avant la première image et la balise </div> ajoutée après la dernière image. Voici le réultat:

C'est déjà beaucoup mieux. Voici le code HTML que j'ai modifié:

Les traits épais rouges montrent le code HTML effacé. Si l'espace entre les images est trop important à votre goût, vous devez éditer -à l'aide de l'éditeur html- les styles CSS des balises <a> qui précédent chacune des images:

• Pour la première image:  

style="clear: left; float: center; margin-bottom: 1em; margin-right: 1em;" 

• Pour la deuxième image:

style="float: center; margin-left: 1em; margin-right: 1em;"  

• Pour la troisième image:

style="clear: right; float: center; margin-bottom: 1em; margin-right: 1em;"  

(en rouge ce que vous devez modifier ou ajouter, barré, ce que vous devez effacer).

 Le résultat final se présente ainsi:

Le code HTML complet corrigé est le suivant:

Bonne chance & bon blog.


(L'original de cet article a été publié en anglais ici).