diff --git a/common/alignment/alignment-en.html b/common/alignment/alignment-en.html new file mode 100644 index 000000000..d4d3d6867 --- /dev/null +++ b/common/alignment/alignment-en.html @@ -0,0 +1,98 @@ +--- +{ + "title": "GCWeb Alignment example", + "language": "en", + "altLangPage": "alignment-fr.html", + "dateModified": "2023-06-19" +} +--- +
+ +text-left
Use to align text to the left.
+Text right aligned.
+<p class="text-left">Use to align text to the left.</p>
+
+text-right
Use to align text to the right.
+<p class="text-right">Use to align text to the right.</p>
+
+text-center
Use to align text to the center.
+<p class="text-center">Use to align text to the center.</p>
+
+center-block
<img class="center-block" alt="..." src="x.jpg" />
+
+text-sm-left
Left-aligned in small view and over
+<p class="text-right text-sm-left">Left-aligned in small view and over</p>
+
+text-sm-right
Right-aligned in small view and over
+<p class="text-sm-right">Right-aligned in small view and over</p>
+
+Class | +Example | +
---|---|
Top (align-top )
+ |
+ Resulting text, top vertical alignment |
+
Middle (align-middle )
+ |
+ Resulting text, middle vertical alignment |
+
Bottom (align-bottom )
+ |
+ Resulting text, middle vertical alignment |
+
<table>
+ <tr>
+ <td> ... </td>
+ <td class=" align-top "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
+ </tr>
+ <tr>
+ <td> ... </td>
+ <td class=" align-middle "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
+ </tr>
+ <tr>
+ <td> ... </td>
+ <td class=" align-bottom "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
+ </tr>
+</table>
+
+The following CSS classes are used in conjunction with flex grids. Examples of these are with the example of the flex grid. (link to come)
+align-self-center
align-self-end
align-items-center
align-items-sm-center
text-left
)Texte aligné à gauche.
+Texte aligné à droite
+<p class="text-left">Texte aligné à gauche.</p>
+
+text-right
)Texte aligné à droite.
+<p class="text-right">Texte aligné à droite.</p>
+
+text-center
)Texte aligné au centre.
+<p class="text-center">Texte aligné au centre.</p>
+
+center-block
)<img class="center-block" alt="..." src="x.jpg" />
+
+text-sm-left
Aligné vers la gauche dans la petite vue et plus
+<p class="text-right text-sm-left">Aligné vers la gauche dans la petite vue et plus</p>
+
+text-sm-right
Aligné vers la droite dans la petite vue et plus
+<p class="text-sm-right">Aligné vers la droite dans la petite vue et plus</p>
+
+Classe CSS | +Exemple | +
---|---|
Haut (align-top )
+ |
+ Texte aligné en haut |
+
Milieu (align-middle )
+ |
+ Texte aligné au milieu |
+
Bas (align-bottom )
+ |
+ Texte aligné en bas |
+
<table>
+ <tr>
+ <td> ... </td>
+ <td class=" align-top "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
+ </tr>
+ <tr>
+ <td> ... </td>
+ <td class=" align-middle "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
+ </tr>
+ <tr>
+ <td> ... </td>
+ <td class=" align-bottom "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
+ </tr>
+</table>
+
+Les classes CSS suivantes sont utilisé conjointement avec les grilles flex. Les examples de ces derniers sont avec l'exemple de la grille flex. (lien à venir)
+align-self-center
align-self-end
align-items-center
align-items-sm-center