Add Image Alignment Classes

content/overview-images/index.fr.md

@@ -24,6 +24,12 @@ Cet article couvre les **shortcodes imgswap et img**. Les images peuvent égalem
 - w est la largeur de l'image.
 - h est la hauteur de l'image.
 
+Cours optionnels:
+
+- ci peut être utilisé pour centrer l'image.
+- fr peut être utilisé pour faire flotter l'image à droite.
+- fl peut être utilisé pour faire flotter l'image vers la gauche.
+
 ** google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs. **
 
 ## Utilisation (même chemin)

content/overview-images/index.md

@@ -24,17 +24,23 @@ This post covers the **imgswap and img shortcodes**. Images can also be embedded
 - w is the width of the image.
 - h is the height of the image.
 
+Optional Classes:
+
+- ci can be used to center the image.
+- fr can be used to float the image right.
+- fl can be used to float the image left.
+
 ** google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values. **
 
 ## Usage (same path)
 ```rs
-{{/* img(src="ferris-happy.svg" alt="Ferris is Happy") */}}
+{{/* img(src="ferris-happy.svg" class="ci" alt="Ferris is Happy") */}}
 ```
 **Output**
 ```html
-{{ img(src="ferris-happy.svg" alt="Ferris is Happy") }}
+{{ img(src="ferris-happy.svg" class="ci" alt="Ferris is Happy") }}
 ```
-{{ img(src="ferris-happy.svg" alt="Ferris is Happy") }}
+{{ img(src="ferris-happy.svg" class="ci" alt="Ferris is Happy") }}
 
 ## Usage (relative path ./)
 ```rs

sass/abridge.scss

@@ -1417,6 +1417,12 @@ $syntax: true !default;//syntax highlighting for code blocks
   .tpad {padding-top: var(--s1)}
   .b {font-weight: var(--fh)}
   .c {text-align: center}// <center> does not pass validation, use: <div class="c"></div>
+  .fl {float: left}
+  .fr {float: right}
+  .ci {
+    display: block;
+    margin: 0 auto;
+  }// center image, <center> does not pass validation, use: <img class="ci"></img>
 }
 @if $syntax {
   // Unstyled Text Color, and background color