Ionic 4：如何修复登录页面设计

Question

我使用离子组件创建了一个登录页面，我想删除输入下方的行（请检查下图），并在屏幕中间对齐所有组件。

我已经尝试过用于对齐问题，但没有任何反应： https : //forum.ionicframework.com/t/i-want-ion-list-to-be-vertical-middle-and-horizo​​ntal-center/104483

有什么建议吗？

该图显示了我的结果

我的档案（CSS + HTML）：

 .image { object-fit: contain; height: 60%; width: 60%; margin: 15px; } .text-input { text-align: center; background: #EDEFF0; border-radius: 4px; border: 1px solid #CDD2D4; padding: .5em; width: 100%; margin: 0 0 1.2em; } .bttn { width: 75%; margin: 10px; } .mdiv { align-content: center; vertical-align: middle; } 

 <ion-content padding class="mdiv"> <ion-list lines="none" style="--ion-background-color: transparent"> <ion-item> <img src="./../../assets/image/profile_pic.png" class="image"/> </ion-item> <ion-item> <ion-input class="text-input" placeholder="Username" color="dark" [(ngModel)] = "username"></ion-input> </ion-item> <ion-item> <ion-input class="text-input" type="password" placeholder="Password" color="dark" [(ngModel)]="password" required></ion-input> </ion-item> </ion-list> <div class="mdiv"> <ion-button class="bttn" shape="round" expand="full" color="success" (click)="login()">Log in</ion-button> <ion-button class="bttn" shape="round" expand="full" color="primary" (click)="doRegister()">Register</ion-button> </div> </ion-content> 

Answer 1

似乎您需要对离子项目元素使用CSS自定义属性 。 在页面或组件的 CSS文件中尝试以下CSS自定义属性 。

ion-item {
--highlight-color-valid: transparent;
--highlight-color-invalid: transparent;
--highlight-color-focused: transparent;
}

请检查ion-item CSS自定义属性以获取详细信息。

Answer 2

关于屏幕中间的对齐，我只是通过将ion-list更改为“ ion-grid并为此添加了一些属性来设法水平对齐了中心的内容。 这是我的最后更改：

 .g-row { align-items: center; justify-content: center; } 

 <ion-grid> <ion-row class="g-row"> <img src="./../../assets/icon/login.png" class="image"/> </ion-row> <ion-row class="g-row"> <input class="text-input" placeholder="Username" [(ngModel)] = "username" required/> </ion-row> <ion-row class="g-row"> <input class="text-input" type="password" placeholder="Password" [(ngModel)]="password" required/> </ion-row> <ion-row class="g-row"> <ion-button class="bttn login" mode="ios" shape="round" expand="full" (click)="login()">Log in</ion-button> </ion-row> <ion-row class="g-row"> <ion-button class="bttn register" mode="ios" shape="round" expand="full" (click)="doRegister()">Register</ion-button> </ion-row> </ion-grid>