diff --git a/src/components/action-sheet/action-sheet.ios.scss b/src/components/action-sheet/action-sheet.ios.scss
index 8cc0035268..13de9dfcf8 100644
--- a/src/components/action-sheet/action-sheet.ios.scss
+++ b/src/components/action-sheet/action-sheet.ios.scss
@@ -74,7 +74,7 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 
 
 .action-sheet-ios {
-  text-align: $action-sheet-ios-text-align;
+  @include text-align($action-sheet-ios-text-align);
 }
 
 .action-sheet-ios .action-sheet-container {
@@ -95,13 +95,14 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 }
 
 .action-sheet-ios .action-sheet-title {
+  @include text-align($action-sheet-ios-text-align);
+
   padding: $action-sheet-ios-title-padding;
 
   border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
   border-radius: $action-sheet-ios-title-border-radius;
   font-size: $action-sheet-ios-title-font-size;
   font-weight: $action-sheet-ios-title-font-weight;
-  text-align: $action-sheet-ios-text-align;
   color: $action-sheet-ios-title-color;
 }
 
diff --git a/src/components/action-sheet/action-sheet.md.scss b/src/components/action-sheet/action-sheet.md.scss
index 4988b931ed..2c85ba50b2 100644
--- a/src/components/action-sheet/action-sheet.md.scss
+++ b/src/components/action-sheet/action-sheet.md.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Text align of the action sheet
-$action-sheet-md-text-align:                            left !default;
+$action-sheet-md-text-align:                            start !default;
 
 /// @prop - Background color of the action sheet
 $action-sheet-md-background:                            #fafafa !default;
@@ -61,14 +61,17 @@ $action-sheet-md-icon-margin:                           0 32px 0 0 !default;
 }
 
 .action-sheet-md .action-sheet-title {
+  @include text-align($action-sheet-md-text-align);
+
   padding: $action-sheet-md-title-padding;
 
   font-size: $action-sheet-md-title-font-size;
-  text-align: $action-sheet-md-text-align;
   color: $action-sheet-md-title-color;
 }
 
 .action-sheet-md .action-sheet-button {
+  @include text-align($action-sheet-md-text-align);
+
   position: relative;
   overflow: hidden;
 
@@ -77,7 +80,6 @@ $action-sheet-md-icon-margin:                           0 32px 0 0 !default;
   min-height: $action-sheet-md-button-min-height;
 
   font-size: $action-sheet-md-button-font-size;
-  text-align: $action-sheet-md-text-align;
   color: $action-sheet-md-button-text-color;
   background: $action-sheet-md-button-background;
 }
@@ -87,13 +89,14 @@ $action-sheet-md-icon-margin:                           0 32px 0 0 !default;
 }
 
 .action-sheet-md .action-sheet-icon {
+  @include text-align($action-sheet-md-icon-text-align);
+
   margin: $action-sheet-md-icon-margin;
   padding: 0;
 
   width: $action-sheet-md-icon-width;
 
   font-size: $action-sheet-md-icon-font-size;
-  text-align: $action-sheet-md-icon-text-align;
   vertical-align: $action-sheet-md-icon-vertical-align;
 }
 
diff --git a/src/components/action-sheet/action-sheet.wp.scss b/src/components/action-sheet/action-sheet.wp.scss
index 3f44fa85d3..cc2ea65437 100644
--- a/src/components/action-sheet/action-sheet.wp.scss
+++ b/src/components/action-sheet/action-sheet.wp.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Text align of the action sheet
-$action-sheet-wp-text-align:                      left !default;
+$action-sheet-wp-text-align:                      start !default;
 
 /// @prop - Background color of the action sheet
 $action-sheet-wp-background:                      #fff !default;
@@ -69,20 +69,22 @@ $action-sheet-wp-icon-margin:                     0 20px 0 0 !default;
 }
 
 .action-sheet-wp .action-sheet-title {
+  @include text-align($action-sheet-wp-title-text-align);
+
   padding: $action-sheet-wp-title-padding;
 
   font-size: $action-sheet-wp-title-font-size;
-  text-align: $action-sheet-wp-title-text-align;
   color: $action-sheet-wp-title-color;
 }
 
 .action-sheet-wp .action-sheet-button {
+  @include text-align($action-sheet-wp-button-text-align);
+
   padding: $action-sheet-wp-button-padding;
 
   min-height: $action-sheet-wp-button-height;
 
   font-size: $action-sheet-wp-button-font-size;
-  text-align: $action-sheet-wp-button-text-align;
   color: $action-sheet-wp-button-text-color;
   background: $action-sheet-wp-button-background;
 }
@@ -92,13 +94,14 @@ $action-sheet-wp-icon-margin:                     0 20px 0 0 !default;
 }
 
 .action-sheet-wp .action-sheet-icon {
+  @include text-align($action-sheet-wp-icon-text-align);
+
   margin: $action-sheet-wp-icon-margin;
   padding: 0;
 
   width: $action-sheet-wp-icon-width;
 
   font-size: $action-sheet-wp-icon-font-size;
-  text-align: $action-sheet-wp-icon-text-align;
   vertical-align: $action-sheet-wp-icon-vertical-align;
 }
 
diff --git a/src/components/alert/alert.ios.scss b/src/components/alert/alert.ios.scss
index 8359a92096..e80f13861e 100644
--- a/src/components/alert/alert.ios.scss
+++ b/src/components/alert/alert.ios.scss
@@ -230,9 +230,9 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-ios .alert-head {
-  padding: $alert-ios-head-padding;
+  @include text-align($alert-ios-head-text-align);
 
-  text-align: $alert-ios-head-text-align;
+  padding: $alert-ios-head-padding;
 }
 
 .alert-ios .alert-title {
@@ -253,10 +253,11 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 
 .alert-ios .alert-message,
 .alert-ios .alert-input-group {
+  @include text-align($alert-ios-message-text-align);
+
   padding: $alert-ios-message-padding;
 
   font-size: $alert-ios-message-font-size;
-  text-align: $alert-ios-message-text-align;
   color: $alert-ios-message-text-color;
 }
 
diff --git a/src/components/alert/alert.md.scss b/src/components/alert/alert.md.scss
index 1a0eb70fb2..74fe4af07f 100644
--- a/src/components/alert/alert.md.scss
+++ b/src/components/alert/alert.md.scss
@@ -22,7 +22,7 @@ $alert-md-box-shadow:                         0 16px 20px $alert-md-box-shadow-c
 $alert-md-head-padding:                       24px 24px 20px 24px !default;
 
 /// @prop - Text align of the alert head
-$alert-md-head-text-align:                    left !default;
+$alert-md-head-text-align:                    start !default;
 
 /// @prop - Font size of the alert title
 $alert-md-title-font-size:                    22px !default;
@@ -112,7 +112,7 @@ $alert-md-button-border-radius:               2px !default;
 $alert-md-button-text-transform:              uppercase !default;
 
 /// @prop - Text align of the alert button
-$alert-md-button-text-align:                  right !default;
+$alert-md-button-text-align:                  end !default;
 
 
 /// @prop - Border top of the alert list
@@ -256,9 +256,9 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-md .alert-head {
-  padding: $alert-md-head-padding;
+  @include text-align($alert-md-head-text-align);
 
-  text-align: $alert-md-head-text-align;
+  padding: $alert-md-head-padding;
 }
 
 .alert-md .alert-title {
@@ -474,6 +474,8 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 }
 
 .alert-md .alert-button {
+  @include text-align($alert-md-button-text-align);
+
   // necessary for ripple to work properly
   position: relative;
   overflow: hidden;
@@ -483,7 +485,6 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 
   border-radius: $alert-md-button-border-radius;
   font-weight: $alert-md-button-font-weight;
-  text-align: $alert-md-button-text-align;
   text-transform: $alert-md-button-text-transform;
   color: $alert-md-button-text-color;
   background-color: $alert-md-button-background-color;
diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss
index 0e52fbf5ee..df2a17b404 100644
--- a/src/components/alert/alert.scss
+++ b/src/components/alert/alert.scss
@@ -108,6 +108,7 @@ ion-alert input {
 }
 
 .alert-tappable {
+  @include text-align(start);
   @include appearance(none);
 
   margin: 0;
@@ -117,7 +118,5 @@ ion-alert input {
 
   font-size: inherit;
   line-height: initial;
-  text-align: left;
-  text-align: start;
   background: transparent;
 }
diff --git a/src/components/alert/alert.wp.scss b/src/components/alert/alert.wp.scss
index ef428750b5..f5a4c2b21e 100644
--- a/src/components/alert/alert.wp.scss
+++ b/src/components/alert/alert.wp.scss
@@ -31,7 +31,7 @@ $alert-wp-background:                          #e6e6e6 !default;
 $alert-wp-head-padding:                        20px 22px 5px 22px !default;
 
 /// @prop - Text align of the alert head
-$alert-wp-head-text-align:                     left !default;
+$alert-wp-head-text-align:                     start !default;
 
 /// @prop - Font size of the alert title
 $alert-wp-title-font-size:                     20px !default;
@@ -256,9 +256,9 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-wp .alert-head {
-  padding: $alert-wp-head-padding;
+  @include text-align($alert-wp-head-text-align);
 
-  text-align: $alert-wp-head-text-align;
+  padding: $alert-wp-head-padding;
 }
 
 .alert-wp .alert-title {
diff --git a/src/components/app/app.scss b/src/components/app/app.scss
index de7b25921c..56262c4874 100644
--- a/src/components/app/app.scss
+++ b/src/components/app/app.scss
@@ -333,33 +333,27 @@ ion-footer {
       // Provide `[text-{bp}]` attributes for aligning the text based
       // on the breakpoint
       [text#{$infix}-center] {
-        // scss-lint:disable ImportantRule
-        text-align: center !important;
+        @include text-align(center, !important);
       }
 
       [text#{$infix}-justify] {
-        // scss-lint:disable ImportantRule
-        text-align: justify !important;
+        @include text-align(justify, !important);
       }
 
       [text#{$infix}-start] {
-        // scss-lint:disable ImportantRule
-        text-align: start !important;
+        @include text-align(start, !important);
       }
 
       [text#{$infix}-end] {
-        // scss-lint:disable ImportantRule
-        text-align: end !important;
+        @include text-align(end, !important);
       }
 
       [text#{$infix}-left] {
-        // scss-lint:disable ImportantRule
-        text-align: left !important;
+        @include text-align(left, !important);
       }
 
       [text#{$infix}-right] {
-        // scss-lint:disable ImportantRule
-        text-align: right !important;
+        @include text-align(right, !important);
       }
 
       [text#{$infix}-nowrap] {
diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss
index 3c983f64b2..3143035a06 100644
--- a/src/components/badge/badge.scss
+++ b/src/components/badge/badge.scss
@@ -11,6 +11,8 @@ $badge-font-weight:               bold !default;
 
 
 ion-badge {
+  @include text-align(center);
+
   display: inline-block;
 
   padding: 3px 8px;
@@ -21,7 +23,6 @@ ion-badge {
   font-weight: $badge-font-weight;
   line-height: 1;
 
-  text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
 }
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index b02013b5e2..075c65f68b 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -11,13 +11,13 @@ $button-round-border-radius:      64px !default;
 
 
 .button {
+  @include text-align(center);
   @include appearance(none);
 
   position: relative;
   z-index: 0;
   display: inline-block;
 
-  text-align: center;
   text-overflow: ellipsis;
   text-transform: none;
 
diff --git a/src/components/chip/chip.scss b/src/components/chip/chip.scss
index ea5720e913..ee434909d4 100644
--- a/src/components/chip/chip.scss
+++ b/src/components/chip/chip.scss
@@ -52,6 +52,8 @@ ion-chip .button {
 }
 
 ion-chip ion-icon {
+  @include text-align($chip-icon-text-align);
+
   width: $chip-icon-size;
   height: $chip-icon-size;
 
@@ -59,7 +61,6 @@ ion-chip ion-icon {
 
   font-size: $chip-icon-font-size;
   line-height: $chip-icon-size;
-  text-align: $chip-icon-text-align;
 }
 
 ion-chip ion-avatar {
diff --git a/src/components/fab/fab.scss b/src/components/fab/fab.scss
index d084c26568..66bb3ee326 100755
--- a/src/components/fab/fab.scss
+++ b/src/components/fab/fab.scss
@@ -20,6 +20,7 @@ $fab-list-button-background-color:      #f4f4f4 !default;
 
 
 .fab {
+  @include text-align(center);
   @include appearance(none);
 
   position: relative;
@@ -33,7 +34,6 @@ $fab-list-button-background-color:      #f4f4f4 !default;
   border-radius: 50%;
   font-size: 14px;
   line-height: $fab-size;
-  text-align: center;
   text-overflow: ellipsis;
   text-transform: none;
   white-space: nowrap;
diff --git a/src/components/infinite-scroll/infinite-scroll.scss b/src/components/infinite-scroll/infinite-scroll.scss
index d9397ce9d8..dade088ae3 100644
--- a/src/components/infinite-scroll/infinite-scroll.scss
+++ b/src/components/infinite-scroll/infinite-scroll.scss
@@ -28,6 +28,8 @@ ion-infinite-scroll {
 // --------------------------------------------------
 
 ion-infinite-scroll-content {
+  @include text-align(center);
+
   display: flex;
 
   flex-direction: column;
@@ -35,8 +37,6 @@ ion-infinite-scroll-content {
 
   height: 100%;
   min-height: 84px;
-
-  text-align: center;
 }
 
 .infinite-loading {
diff --git a/src/components/item/item-media.scss b/src/components/item/item-media.scss
index 0fdacd6201..eeaf66c3c9 100644
--- a/src/components/item/item-media.scss
+++ b/src/components/item/item-media.scss
@@ -11,9 +11,9 @@
 
 .item > ion-icon:first-child,
 .item-inner > ion-icon:first-child {
-  min-width: 24px;
+  @include text-align(center);
 
-  text-align: center;
+  min-width: 24px;
 }
 
 .item > ion-icon,
diff --git a/src/components/item/item.scss b/src/components/item/item.scss
index 3a006805a6..c8ef0360d6 100644
--- a/src/components/item/item.scss
+++ b/src/components/item/item.scss
@@ -19,6 +19,8 @@
 }
 
 .item-block {
+  @include text-align(initial);
+
   display: flex;
   overflow: hidden;
 
@@ -35,7 +37,6 @@
 
   font-weight: normal;
   line-height: normal;
-  text-align: initial;
   text-decoration: none;
   color: inherit;
 }
diff --git a/src/components/picker/picker.ios.scss b/src/components/picker/picker.ios.scss
index 2b78541a81..5baeb80cd3 100644
--- a/src/components/picker/picker.ios.scss
+++ b/src/components/picker/picker.ios.scss
@@ -69,10 +69,9 @@ $picker-button-ios-strong-font-weight:         600 !default;
 }
 
 .picker-ios .picker-toolbar-button {
-  flex: 1;
+  @include text-align(end);
 
-  text-align: right;
-  text-align: end;
+  flex: 1;
 }
 
 .picker-ios .picker-toolbar-button:last-child .picker-button {
@@ -80,10 +79,9 @@ $picker-button-ios-strong-font-weight:         600 !default;
 }
 
 .picker-ios .picker-toolbar-cancel {
-  font-weight: normal;
+  @include text-align(start);
 
-  text-align: left;
-  text-align: start;
+  font-weight: normal;
 }
 
 .picker-ios .picker-button,
diff --git a/src/components/picker/picker.scss b/src/components/picker/picker.scss
index 9b6a3237c1..7a478a5c2c 100644
--- a/src/components/picker/picker.scss
+++ b/src/components/picker/picker.scss
@@ -87,6 +87,8 @@ ion-picker-cmp {
 }
 
 .picker-prefix {
+  @include text-align(end);
+
   position: relative;
 
   flex: 2;
@@ -94,12 +96,12 @@ ion-picker-cmp {
   min-width: 45%;
   max-width: 50%;
 
-  text-align: right;
-  text-align: end;
   white-space: nowrap;
 }
 
 .picker-suffix {
+  @include text-align(start);
+
   position: relative;
 
   flex: 2;
@@ -107,13 +109,13 @@ ion-picker-cmp {
   min-width: 45%;
   max-width: 50%;
 
-  text-align: left;
-  text-align: start;
   white-space: nowrap;
 }
 
 // contain property is supported by Chrome
 .picker-opt {
+  @include text-align(center);
+
   position: absolute;
   top: 0;
   left: 0;
@@ -122,7 +124,6 @@ ion-picker-cmp {
 
   width: 100%;
 
-  text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
 
diff --git a/src/components/picker/picker.wp.scss b/src/components/picker/picker.wp.scss
index 1c1fa69c52..86c8714592 100644
--- a/src/components/picker/picker.wp.scss
+++ b/src/components/picker/picker.wp.scss
@@ -70,17 +70,15 @@ $picker-wp-option-selected-color:             color($colors-wp, primary) !defaul
 }
 
 .picker-wp .picker-toolbar-button {
-  flex: 1;
+  @include text-align(end);
 
-  text-align: right;
-  text-align: end;
+  flex: 1;
 }
 
 .picker-wp .picker-toolbar-cancel {
-  font-weight: normal;
+  @include text-align(start);
 
-  text-align: left;
-  text-align: start;
+  font-weight: normal;
 }
 
 .picker-wp .picker-button,
diff --git a/src/components/popover/test/basic/pages/page-one/page-one.html b/src/components/popover/test/basic/pages/page-one/page-one.html
index 13fdc338d3..ce5cfc2c92 100644
--- a/src/components/popover/test/basic/pages/page-one/page-one.html
+++ b/src/components/popover/test/basic/pages/page-one/page-one.html
@@ -34,10 +34,10 @@
   <ion-grid style="padding: 10px 0;">
     <ion-row>
       <ion-col col-6>
-        <a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover left</a>
+        <a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover start</a>
       </ion-col>
-      <ion-col col-6 style="text-align: right;">
-        <a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover right</a>
+      <ion-col col-6 text-end>
+        <a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover end</a>
       </ion-col>
     </ion-row>
   </ion-grid>
diff --git a/src/components/range/range.ios.scss b/src/components/range/range.ios.scss
index 973d7cbcf2..8bd56e6e25 100644
--- a/src/components/range/range.ios.scss
+++ b/src/components/range/range.ios.scss
@@ -122,6 +122,8 @@ $range-ios-pin-padding:                       8px !default;
 }
 
 .range-ios .range-knob-handle {
+  @include text-align(center);
+
   position: absolute;
   top: ($range-ios-slider-height / 2);
   left: 0%;
@@ -131,8 +133,6 @@ $range-ios-pin-padding:                       8px !default;
 
   width: $range-ios-hit-width;
   height: $range-ios-hit-height;
-
-  text-align: center;
 }
 
 .range-ios .range-knob {
@@ -173,6 +173,8 @@ $range-ios-pin-padding:                       8px !default;
 }
 
 .range-ios .range-pin {
+  @include text-align(center);
+
   position: relative;
   top: -20px;
   display: inline-block;
@@ -185,8 +187,6 @@ $range-ios-pin-padding:                       8px !default;
 
   font-size: $range-ios-pin-font-size;
 
-  text-align: center;
-
   color: $range-ios-pin-color;
 
   background: $range-ios-pin-background-color;
diff --git a/src/components/range/range.md.scss b/src/components/range/range.md.scss
index 3a4395d829..8a1d74cad9 100644
--- a/src/components/range/range.md.scss
+++ b/src/components/range/range.md.scss
@@ -126,6 +126,8 @@ $range-md-pin-min-background-color:          $range-md-bar-background-color !def
 }
 
 .range-md .range-knob-handle {
+  @include text-align(center);
+
   position: absolute;
   top: ($range-md-slider-height / 2);
   left: 0%;
@@ -135,8 +137,6 @@ $range-md-pin-min-background-color:          $range-md-bar-background-color !def
 
   width: $range-md-hit-width;
   height: $range-md-hit-height;
-
-  text-align: center;
 }
 
 .range-md .range-knob {
@@ -186,6 +186,8 @@ $range-md-pin-min-background-color:          $range-md-bar-background-color !def
 }
 
 .range-md .range-pin {
+  @include text-align(center);
+
   position: relative;
   top: -20px;
   display: inline-block;
@@ -199,8 +201,6 @@ $range-md-pin-min-background-color:          $range-md-bar-background-color !def
 
   font-size: $range-md-pin-font-size;
 
-  text-align: center;
-
   color: $range-md-pin-color;
 
   background: $range-md-pin-background-color;
diff --git a/src/components/range/range.wp.scss b/src/components/range/range.wp.scss
index c5e6e3555e..0fbcd0dc2b 100644
--- a/src/components/range/range.wp.scss
+++ b/src/components/range/range.wp.scss
@@ -117,6 +117,8 @@ $range-wp-pin-padding:                       8px !default;
 }
 
 .range-wp .range-knob-handle {
+  @include text-align(center);
+
   position: absolute;
   top: ($range-wp-slider-height / 2);
   left: 0%;
@@ -126,8 +128,6 @@ $range-wp-pin-padding:                       8px !default;
 
   width: $range-wp-hit-width;
   height: $range-wp-hit-height;
-
-  text-align: center;
 }
 
 .range-wp .range-knob {
@@ -166,6 +166,8 @@ $range-wp-pin-padding:                       8px !default;
 }
 
 .range-wp .range-pin {
+  @include text-align(center);
+
   position: relative;
   top: -24px;
   display: inline-block;
@@ -178,8 +180,6 @@ $range-wp-pin-padding:                       8px !default;
 
   font-size: $range-wp-pin-font-size;
 
-  text-align: center;
-
   color: $range-wp-pin-color;
 
   background: $range-wp-pin-background-color;
diff --git a/src/components/refresher/refresher.scss b/src/components/refresher/refresher.scss
index 94b8260f89..f727f414f0 100644
--- a/src/components/refresher/refresher.scss
+++ b/src/components/refresher/refresher.scss
@@ -69,8 +69,9 @@ ion-refresher-content {
 
 .refresher-pulling-icon,
 .refresher-refreshing-icon {
+  @include text-align(center);
+
   font-size: $refresher-icon-font-size;
-  text-align: center;
   color: $refresher-icon-color;
   transform-origin: center;
   transition: 200ms;
@@ -78,8 +79,9 @@ ion-refresher-content {
 
 .refresher-pulling-text,
 .refresher-refreshing-text {
+  @include text-align(center);
+
   font-size: $refresher-text-font-size;
-  text-align: center;
   color: $refresher-text-color;
 }
 
diff --git a/src/components/segment/segment.scss b/src/components/segment/segment.scss
index 2655ebdbc2..67b6e69e5a 100644
--- a/src/components/segment/segment.scss
+++ b/src/components/segment/segment.scss
@@ -15,6 +15,8 @@ ion-segment {
 }
 
 .segment-button {
+  @include text-align(center);
+
   position: relative;
   display: block;
   overflow: hidden;
@@ -22,7 +24,6 @@ ion-segment {
   margin-right: 0;
   margin-left: 0;
 
-  text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
diff --git a/src/components/slides/slides.scss b/src/components/slides/slides.scss
index abd97fef5f..54401fe17b 100644
--- a/src/components/slides/slides.scss
+++ b/src/components/slides/slides.scss
@@ -151,8 +151,9 @@
 
 /* Pagination Styles */
 .swiper-pagination {
+  @include text-align(center);
+
   position: absolute;
-  text-align: center;
   transition: 300ms;
   transform: translate3d(0, 0, 0);
   z-index: 10;
@@ -415,12 +416,13 @@ button.swiper-pagination-bullet {
 }
 
 .swiper-zoom-container {
+  @include text-align(center);
+
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  text-align: center;
 }
 
 .swiper-zoom-container > img,
@@ -514,9 +516,10 @@ ion-slides {
 }
 
 .slide-zoom {
+  @include text-align(center);
+
   display: block;
   width: 100%;
-  text-align: center;
 }
 
 .swiper-container {
@@ -535,12 +538,13 @@ ion-slides {
 }
 
 .swiper-slide {
+  @include text-align(center);
+
   width: 100%;
   height: 100%;
 
   box-sizing: border-box;
 
-  text-align: center;
   font-size: 18px;
 
   /* Center slide text vertically */
diff --git a/src/components/slides/test/intro/main.html b/src/components/slides/test/intro/main.html
index f7e9f8e57a..707971027b 100644
--- a/src/components/slides/test/intro/main.html
+++ b/src/components/slides/test/intro/main.html
@@ -75,6 +75,7 @@
 }
 #list ol li {
   text-align: left;
+  text-align: start;
   list-style: decimal;
   margin: 10px 0px;
 }
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index ce1d1c4ef0..48a9127ebd 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -26,6 +26,8 @@
 }
 
 .tab-button {
+  @include text-align(center);
+
   position: relative;
   z-index: 0;
   display: flex;
@@ -42,7 +44,6 @@
   border: 0;
   border-radius: 0;
 
-  text-align: center;
   text-decoration: none;
   background: none;
   cursor: pointer;
@@ -98,17 +99,17 @@
 }
 
 [tabsLayout=icon-left] .tab-button .tab-button-icon {
-  padding-right: 8px;
+  @include text-align(end);
 
-  text-align: right;
+  padding-right: 8px;
 }
 
 [tabsLayout=icon-right] .tab-button .tab-button-icon {
+  @include text-align(start);
+
   order: 10;
 
   padding-left: 8px;
-
-  text-align: left;
 }
 
 .tab-hidden,
diff --git a/src/components/toolbar/toolbar-button.scss b/src/components/toolbar/toolbar-button.scss
index bb9dca7f30..1a26357c03 100644
--- a/src/components/toolbar/toolbar-button.scss
+++ b/src/components/toolbar/toolbar-button.scss
@@ -4,6 +4,7 @@
 // --------------------------------------------------
 
 .bar-button {
+  @include text-align(center);
   @include appearance(none);
 
   position: relative;
@@ -13,7 +14,6 @@
   padding: 0;
 
   line-height: 1;
-  text-align: center;
   text-overflow: ellipsis;
   text-transform: none;
   white-space: nowrap;
diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss
index 9d1e2d57e4..766592f93e 100644
--- a/src/components/toolbar/toolbar.ios.scss
+++ b/src/components/toolbar/toolbar.ios.scss
@@ -97,9 +97,10 @@ $toolbar-button-ios-strong-font-weight:     600 !default;
 }
 
 .toolbar-title-ios {
+  @include text-align($toolbar-ios-title-text-align);
+
   font-size: $toolbar-ios-title-font-size;
   font-weight: $toolbar-ios-title-font-weight;
-  text-align: $toolbar-ios-title-text-align;
   color: $toolbar-ios-title-text-color;
 
   pointer-events: auto;
@@ -156,15 +157,15 @@ $toolbar-button-ios-strong-font-weight:     600 !default;
 }
 
 .bar-buttons-ios[end] {
-  order: map-get($toolbar-order-ios, buttons-end);
+  @include text-align(end);
 
-  text-align: right;
+  order: map-get($toolbar-order-ios, buttons-end);
 }
 
 .bar-buttons-ios[right] {
-  order: map-get($toolbar-order-ios, buttons-right);
+  @include text-align(right);
 
-  text-align: right;
+  order: map-get($toolbar-order-ios, buttons-right);
 }
 
 
diff --git a/src/components/toolbar/toolbar.md.scss b/src/components/toolbar/toolbar.md.scss
index b30609793b..98b9b1c3d0 100644
--- a/src/components/toolbar/toolbar.md.scss
+++ b/src/components/toolbar/toolbar.md.scss
@@ -169,15 +169,15 @@ $toolbar-button-md-strong-font-weight:   bold !default;
 }
 
 .bar-buttons-md[end] {
-  order: map-get($toolbar-order-md, buttons-end);
+  @include text-align(end);
 
-  text-align: right;
+  order: map-get($toolbar-order-md, buttons-end);
 }
 
 .bar-buttons-md[right] {
-  order: map-get($toolbar-order-md, buttons-right);
+  @include text-align(right);
 
-  text-align: right;
+  order: map-get($toolbar-order-md, buttons-right);
 }
 
 
@@ -346,12 +346,13 @@ $toolbar-button-md-strong-font-weight:   bold !default;
 }
 
 .back-button-icon-md {
+  @include text-align(start);
+
   margin: 0;
   padding: 0 6px;
 
   font-size: 2.4rem;
   font-weight: normal;
-  text-align: left;
 }
 
 
diff --git a/src/components/toolbar/toolbar.wp.scss b/src/components/toolbar/toolbar.wp.scss
index a020227066..bdeca672a0 100644
--- a/src/components/toolbar/toolbar.wp.scss
+++ b/src/components/toolbar/toolbar.wp.scss
@@ -129,15 +129,15 @@ $toolbar-button-wp-strong-font-weight:   bold !default;
 }
 
 .bar-buttons-wp[end] {
-  order: map-get($toolbar-order-wp, buttons-end);
+  @include text-align(end);
 
-  text-align: right;
+  order: map-get($toolbar-order-wp, buttons-end);
 }
 
 .bar-buttons-wp[right] {
-  order: map-get($toolbar-order-wp, buttons-right);
+  @include text-align(right);
 
-  text-align: right;
+  order: map-get($toolbar-order-wp, buttons-right);
 }
 
 
@@ -300,12 +300,13 @@ $toolbar-button-wp-strong-font-weight:   bold !default;
 }
 
 .back-button-icon-wp {
+  @include text-align(start);
+
   margin: 0;
   padding: 0 6px;
 
   font-size: 2.4rem;
   font-weight: normal;
-  text-align: left;
 }
 
 
diff --git a/src/themes/ionic.functions.scss b/src/themes/ionic.functions.scss
index 5be3b38170..b25acc66fd 100644
--- a/src/themes/ionic.functions.scss
+++ b/src/themes/ionic.functions.scss
@@ -291,3 +291,19 @@
 
   @return $colors-list;
 }
+
+// Sets correct text align with support for old browsers
+// @param {string} $direction - text direction
+// @param {string} $decorator - !important
+// ----------------------------------------------------------
+@mixin text-align($direction, $decorator: null) {
+  @if $direction == start {
+    text-align: left;
+    text-align: start $decorator;
+  } @else if $direction == end {
+    text-align: right;
+    text-align: end $decorator;
+  } @else {
+    text-align: $direction $decorator;
+  }
+}