文章詳情頁
css - ionic中的柵格布局如何讓文字內容多少不同的每一列中的內容都能垂直居中？
瀏覽：146日期：2024-03-05 17:04:48
問題描述
每一列數據是由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
標簽：
CSS
相關文章：
1. 我的html頁面一提交，網頁便顯示出了我的php代碼，求問是什么原因？2. tp6表單令牌3. docker 17.03 怎么配置 registry mirror ?4. java 排序的問題5. 我在centos容器里安裝docker，也就是在容器里安裝容器，報錯了？6. django - 后臺返回的json數據經過Base64加密，獲取時用python如何解密~！7. node.js - node 客戶端socket一直報錯Error: read ECONNRESET，用php的socket沒問題哈。。8. 數據庫 - 使用讀寫分離后, MySQL主從復制延遲會導致讀不到數據嗎?9. 老哥們求助啊10. javascript - canvas 可以實現 PS 魔法橡皮擦的功能嗎？
排行榜
網公網安備