在ionic2应用程序中垂直对齐按钮

Question

在应用程序中，“编辑”列下的按钮不会与其他列垂直对齐。它总是在底部对齐，这使得行看起来很糟糕。

代码如下：

<ion-row>

<ion-col col-3> {{item.projectname}} </ion-col>
<ion-col col-4> {{item.loginid}} </ion-col>
<ion-col col-3> {{item.password}} </ion-col>
<ion-col col-2>
    <button ion-button menuToggle strong *ngIf="buttonclicked"                
     (click)="editdata(item)"><ion-icon name="menu"></ion-icon>
	</button>
</ion-col>  
</ion-row>

请在这方面提供指导。

Answer 1

尝试将此CSS添加到您的组件：

ion-col {
    display: flex;
    align-content: center;
    align-items: center;
}

如果我理解正确，这将通过垂直对齐文本来解决您的问题。 （因为按钮已经居中）

P.S你应该为此创建一个类，这样它不会影响组件中的每个ion-col！