您好,欢迎来到[编程问答]网站首页   源码下载   电子书籍   软件下载   专题
当前位置:首页 >> 编程问答 >> 移动开发 >> ionic中的栅格布局如何让文字内容多少不同的每一列中的内容都能垂直居中?

ionic中的栅格布局如何让文字内容多少不同的每一列中的内容都能垂直居中?

来源:网络整理     时间:2017/7/21 0:32:50     关键词:

关于网友提出的“ ionic中的栅格布局如何让文字内容多少不同的每一列中的内容都能垂直居中?”问题疑问,本网通过在网上对“ ionic中的栅格布局如何让文字内容多少不同的每一列中的内容都能垂直居中?”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:

问题: ionic中的栅格布局如何让文字内容多少不同的每一列中的内容都能垂直居中?
描述:

每一列数据是由angular遍历生成
效果如下图:

因为左侧名称文字多少不同,所以右侧数据会出现偏上显示情况,已经试了display: table-cell;
vertical-align: middle;,但是没效果,也试了用line-height设置,但也不行,求大神指点,多谢啊!
代码结构是这样的:
<ion-row *ngFor="let row of config.rows">

    <ion-col col-3>{{row.rowName}}</ion-col>  <!-- 左侧名称 -->
    <ion-col *ngFor="let col of row.cols">{{col.data.value}}</ion-col>  <!-- 右侧数据 -->

</ion-row>
右侧三列数据是统一遍历生成的

使用ionic的align-self-center,发现表格的框线会出问题,求解啊啊啊啊啊

<ion-row *ngFor="let row of config.rows">

    <ion-col col-3> {{row.rowName}}</ion-col>
    <ion-col align-self-center>
      <ion-row>
        <ion-col *ngFor="let col of row.cols">{{col.data.value}}
        </ion-col>
      </ion-row>
    </ion-col>

</ion-row>


解决方案1:

display:flex; align-items:center


以上介绍了“ ionic中的栅格布局如何让文字内容多少不同的每一列中的内容都能垂直居中?”的问题解答,希望对有需要的网友有所帮助。
本文网址链接:http://www.codes51.com/itwd/4402455.html

相关图片

相关文章