From 882f8fef07dfb6ebda17ca09046d1af281075098 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 29 May 2020 11:30:19 -0400
Subject: [PATCH] fix(item): inherit align-items from parent item (#19278)

inherits alignment in inner item, sets item alignment to center

fixes #18703
---
 core/src/components/input/test/spec/index.html | 12 +++++++++++-
 core/src/components/item/item.scss             | 17 ++++++++++-------
 2 files changed, 21 insertions(+), 8 deletions(-)
diff --git a/core/src/components/input/test/spec/index.html b/core/src/components/input/test/spec/index.html
index 058e4729110..041958cc2a5 100644
--- a/core/src/components/input/test/spec/index.html
+++ b/core/src/components/input/test/spec/index.html
@@ -13,7 +13,7 @@
 
 <body>
   <ion-app>
-    <ion-content class="ion-padding">
+    <ion-content>
       <ion-item>
         <ion-label position="floating">Floating: input</ion-label>
         <ion-input></ion-input>
@@ -34,6 +34,16 @@
         <ion-label position="stacked">Stacked: div</ion-label>
         <div>A div</div>
       </ion-item>
+      <ion-item class="ion-align-items-center">
+        <ion-icon slot="start" name="planet"></ion-icon>
+        <ion-label position="stacked">Align items: center</ion-label>
+        <div>A div</div>
+      </ion-item>
+      <ion-item class="ion-align-items-center">
+        <ion-icon slot="start" name="planet"></ion-icon>
+        <ion-label position="stacked">Align items: center</ion-label>
+        <div class="ion-align-self-end">A div: align self right</div>
+      </ion-item>
       <ion-item>
         <ion-label position="floating">Floating: textarea</ion-label>
         <ion-textarea></ion-textarea>
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index 3b38b5fa497..ecbfcae4470 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -79,6 +79,9 @@
 
   position: relative;
 
+  align-items: center;
+  justify-content: space-between;
+
   outline: none;
 
   color: var(--color);
@@ -87,9 +90,9 @@
 
   text-align: initial;
   text-decoration: none;
-  box-sizing: border-box;
 
   overflow: hidden;
+  box-sizing: border-box;
 }
 
 
@@ -202,8 +205,8 @@
   display: flex;
   position: relative;
 
-  align-items: center;
-  justify-content: space-between;
+  align-items: inherit;
+  justify-content: inherit;
 
   width: 100%;
   min-height: var(--min-height);
@@ -313,9 +316,8 @@ button, a {
 // Item Input
 // --------------------------------------------------
 
-:host([vertical-align-top]),
 :host(.item-input) {
-  align-items: flex-start;
+  align-items: center;
 }
 
 .input-wrapper {
@@ -323,6 +325,7 @@ button, a {
 
   flex: 1;
   flex-direction: inherit;
+
   align-items: inherit;
   align-self: stretch;
 
@@ -332,8 +335,8 @@ button, a {
   box-sizing: border-box;
 }
 
-:host(.item-label-stacked) .item-native,
-:host(.item-label-floating) .item-native {
+:host(.item-label-stacked),
+:host(.item-label-floating) {
   align-items: start;
 }
 
