[英]Ionic 3, ion-col content has to align middle
我有一個表格設計,其中離子行中的兩個 ion-col 具有不同的行數。 但我需要在中間對齊兩個內容。 什么是最好的解決方案?
<ion-content padding>
<ion-grid>
<ion-row>
....other cols....
<ion-col col-6>
<label>Date of Audit:
<h2>01/30/18<br/>
1:06:50<small>PM UTC</small></h2>
</label>
</ion-col>
<ion-col col-6 text-center center class="overall-score">
<label>Overall Score:
<h1>40%</h1>
</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
樣式需要應用於 ion-col,以使其內容居中。
CSS:
ion-col {
text-align: center;
}
或者
HTML:
<ion-col class="someclass">
CSS:
ion-col.someclass {
text-align: center;
}
創建一個新的 css 類:
.align-text-middle {
display: flex;
align-items: center;
}
並將該類添加到 ion-col。
添加離子排
<ion-col>
<ion-row style="min-height:100%" justify-content-center align-items-center>
<p>test</p>
</ion-row>
</ion-col>
使用Grids、rows 和 cols進行良好實踐,閱讀Ionic 文檔,簡單有效。
對於這個中心:
<ion-grid>
<ion-row justify-content-center>
<h1>This is center</h1>
</ion-row>
</ion-grid>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.