[英]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.