Update to make centered images work

diff --git a/docs/pages/alignment.md b/docs/pages/alignment.md
index 7f71a4e33284db200864f695dd9c42d9fa44ce9c..03c05e057df322a656ce0bc955faa6c0ac4b5eae 100644 (file)
--- a/docs/pages/alignment.md
+++ b/docs/pages/alignment.md
@@ -4,4 +4,4 @@ description: Centering made easy.
 sass: scss/components/_alignment.scss
 ---
 
-Just add the class center any element and you’ll be good to go. Inky will handle the magic behind the scenes! In the regular old CSS version, you’d have to fiddle with adding a “.center” class and a <code>&lt;center&gt;</code> tag to make sure things are centered. Now you just just need to add the class and move on ahead!
+Just add the class center any element and you’ll be good to go. Inky will handle the magic behind the scenes! In the regular old CSS version, you’d have to fiddle with adding a “.text-center” class and a <code>&lt;center&gt;</code> tag to make sure things are centered. Now you just just need to add the class and move on ahead!

diff --git a/scss/components/_alignment.scss b/scss/components/_alignment.scss
index 7ce092efa03d4048c2bddbfc2992813d6ea7ae3f..01ac680946105042bf7d0592d1b54a4b2ae66bf3 100755 (executable)
--- a/scss/components/_alignment.scss
+++ b/scss/components/_alignment.scss
@@ -56,7 +56,7 @@ img.float-right {
   text-align: right;
 }
 
-img.float-center {
+img.float-center, img.text-center {
   margin: 0 auto;
   float: none;
   text-align: center;

diff --git a/testing/src/pages/center.html b/testing/src/pages/center.html
new file mode 100644 (file)
index 0000000..d67bac6
--- /dev/null
+++ b/testing/src/pages/center.html
@@ -0,0 +1,17 @@
+<container>
+  <row>
+    <columns small="12" large="12" class="text-center">
+      <center>
+        <p class="text-center">I should be centered</p>
+      </center>
+    </columns>
+  </row>
+  <row>
+    <columns small="12" large="12" class="text-center">
+      <center>
+        <img src="http://placehold.it/200x150">
+      </center>
+    </columns>
+  </row>
+</container>
+