]> git.ipfire.org Git - thirdparty/foundation/foundation-emails.git/commitdiff
adds image float classes
authorRafiBomb <rafi@zurb.com>
Mon, 21 Mar 2016 05:32:03 +0000 (22:32 -0700)
committerRafiBomb <rafi@zurb.com>
Mon, 21 Mar 2016 05:32:03 +0000 (22:32 -0700)
docs/pages/alignment.md

index 722b6021b4db71a8cf6b0c4e6ec8976f21953f8a..f39871f25711f571d289866c4e88f2faff797866 100644 (file)
@@ -89,7 +89,6 @@ Also, it's not really a float, but the `.float-center` class to an element to en
 
 If you need to center an image only on mobile clients, you can apply the `.small-float-center` class. A good use case would be centering an image smaller than the full column width on devices like an iPhone 5, iPhone 6, and Android 4.4.
 
-
 ```inky_example
 <container>
   <row>
@@ -104,6 +103,22 @@ If you need to center an image only on mobile clients, you can apply the `.small
 </container>
 ```
 
+## Aligning images left and right
+
+You can also align images to the left or the right.
+
+```inky_example
+<container>
+  <row>
+    <columns>
+      <img class="float-left" src="http://placehold.it/200?text=left" alt="">
+      <img class="float-center" src="http://placehold.it/200?text=center" alt="">
+      <img class="float-right" src="http://placehold.it/200?text=right" alt="">
+    </columns>
+  </row>
+</container>
+```
+
 ## Centering columns
 
 Tables by nature take up as much space is available to them. Because of this, centering columns can be done by adding empty columns to left and right of the column to be centered.