[英]Ionic 3, ion-col content has to align middle
I have a tabular design from which two ion-col in a ion-row have different number of lines.我有一个表格设计,其中离子行中的两个 ion-col 具有不同的行数。 but I need to align both the content in the middle.但我需要在中间对齐两个内容。 what would be best solution for this?什么是最好的解决方案?
<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>
The style need to be applied to the ion-col, in order to center its content.样式需要应用于 ion-col,以使其内容居中。
CSS: CSS:
ion-col {
text-align: center;
}
or或者
HTML: HTML:
<ion-col class="someclass">
CSS: CSS:
ion-col.someclass {
text-align: center;
}
Create a new css class:创建一个新的 css 类:
.align-text-middle {
display: flex;
align-items: center;
}
And add that class to the ion-col.并将该类添加到 ion-col。
add ion-row添加离子排
<ion-col>
<ion-row style="min-height:100%" justify-content-center align-items-center>
<p>test</p>
</ion-row>
</ion-col>
Use Grids, rows and cols for good practices, read the Ionic documentation , simple and effective.使用Grids、rows 和 cols进行良好实践,阅读Ionic 文档,简单有效。
For center with this:对于这个中心:
<ion-grid>
<ion-row justify-content-center>
<h1>This is center</h1>
</ion-row>
</ion-grid>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.