diff --git a/src/app/app.scss b/src/app/app.scss
index 6f95bbd02..ab984fc31 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -637,40 +637,47 @@ ion-app.app-root {
       display: inline-block;
   }
 
+  .atto_image_button_text-top,
+  .atto_image_button_middle,
+  .atto_image_button_text-bottom,
+  .atto_image_button_left,
+  .atto_image_button_right {
+    vertical-align: middle;
+    max-width: 100%;
+    height: auto;
+    width: auto;
+    display: inline-block;
+    margin: 0 0.5em;
+
+    &.img-responsive {
+      /* If the image is display: block then linking the image to URLs won't work. */
+      /*display: inline-block;*/
+      max-width: 100%;
+      height: auto;
+      width: auto;
+    }
+  }
+
   .atto_image_button_text-top {
       vertical-align: text-top;
-      margin: 0 0.5em;
   }
 
   .atto_image_button_middle {
-      vertical-align: middle;
-      margin: 0 0.5em;
-  }
+      vertical-align: middle;  }
 
   .atto_image_button_text-bottom {
       vertical-align: text-bottom;
-      margin: 0 0.5em;
-  }
-
-  .atto_image_button_text-top.img-responsive,
-  .atto_image_button_middle.img-responsive,
-  .atto_image_button_text-bottom.img-responsive {
-      /* If the image is display: block then linking the image to URLs won't work. */
-      display: inline-block;
-      max-width: calc(100% - 1em);
   }
 
   /*rtl:begin:ignore*/
   .atto_image_button_left {
       @include float(start);
       @include margin(0, 0.5em, 0, 0);
-      max-width: calc(100% - 1em);
   }
 
   .atto_image_button_right {
       @include float(end);
       @include margin(0, 0, 0, 0.5em);
-      max-width: calc(100% - 1em);
   }
   /*rtl:end:ignore*/
 
diff --git a/src/directives/format-text.ts b/src/directives/format-text.ts
index 5e8eaee07..e5544fc49 100644
--- a/src/directives/format-text.ts
+++ b/src/directives/format-text.ts
@@ -137,6 +137,12 @@ export class CoreFormatTextDirective implements OnChanges {
             container.classList.add('atto_image_button_right');
         } else if (img.classList.contains('atto_image_button_left')) {
             container.classList.add('atto_image_button_left');
+        } else if (img.classList.contains('atto_image_button_text-top')) {
+            container.classList.add('atto_image_button_text-top');
+        } else if (img.classList.contains('atto_image_button_middle')) {
+            container.classList.add('atto_image_button_middle');
+        } else if (img.classList.contains('atto_image_button_text-bottom')) {
+            container.classList.add('atto_image_button_text-bottom');
         }
 
         this.domUtils.wrapElement(img, container);