liên kết dọc 2 ion sử dụng lưới ion

Question

Tôi có 2 nút trên màn hình trong Ionic 2 và tôi muốn căn chỉnh chúng với nhau (một trên đầu kia, nhưng cùng nhau) ở giữa màn hình (ngang và căn chỉnh theo chiều dọc).

Tôi muốn sử dụng lưới ion, không có miếng đệm, lề, phao hoặc tỷ lệ phần trăm.

Vì vậy, tôi có điều này

<ion-content> 
    <ion-grid> 
    <ion-row> 
     <ion-col text-center> 
     <button>button 1</button> 
     </ion-col> 
    </ion-row> 
    <ion-row> 
     <ion-col text-center> 
     <button>button 2</button> 
     </ion-col> 
    </ion-row> 
    </ion-grid> 
</ion-content> 

Với <ion-col text-center> tôi có thể sắp xếp chúng đến trung tâm theo chiều ngang, nhưng đối với sự liên kết dọc Tôi không thể nhìn thấy bất cứ điều gì mà tôi có thể áp dụng cho, vì vậy tôi cố gắng này:

ion-grid { 
    justify-content: center; 
} 

Nhưng không có gì xảy ra. Tôi đã kiểm tra và điều này đang được áp dụng cho trang, nhưng vì một lý do nào đó nó không hoạt động. Bất kỳ ý tưởng nào?

Answer 1

Sử dụng này:

ion-grid { 
    height: 100%; 
    justify-content: center; 
} 

Answer 2

Bạn có thể sử dụng đoạn mã sau trong một cột (ví dụ: flex-col) bên ion lưới để gắn kết trung tâm theo chiều dọc và theo chiều ngang:

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

Answer 3

Bạn có thể sử dụng nhiều hơn một chút nếu bạn làm theo cách này, và sau đó chỉ cần áp dụng chiều cao trong các tệp Sass của bạn. Bạn cũng không cần ion-col. Ngoài ra, các lớp học đã thay đổi và chỉ .grid và .row

Markup

<ion-content> 

    <ion-grid> 
     <ion-row justify-content-center align-items-center> 

     Horizontally and Vertically Centered 

     </ion-row> 
    </ion-grid> 

    </ion-content> 

Sass

.grid, .row { 
    // Force grid to fill height of content as this is not set by default 
    height: 100%; 
}