文章詳情頁
css - ionic中的柵格布局如何讓文字內容多少不同的每一列中的內容都能垂直居中？
瀏覽：211日期：2024-03-05 17:04:48
問題描述
每一列數(shù)據(jù)是由angular遍歷生成效果如下圖：
因為左側名稱文字多少不同，所以右側數(shù)據(jù)會出現(xiàn)偏上顯示情況，已經試了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> <!-- 右側數(shù)據(jù) -->
</ion-row>右側三列數(shù)據(jù)是統(tǒng)一遍歷生成的
使用ionic的align-self-center，發(fā)現(xiàn)表格的框線會出問題，求解啊啊啊啊啊
<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. docker - 各位電腦上有多少個容器啊？容器一多，自己都搞混了，咋辦呢？2. java - spring boot 如何打包成asp.net core 那種獨立應用?3. java - 在用戶不登錄的情況下，用戶如何添加保存到購物車？4. datetime - Python如何獲取當前時間5. javascript - nginx反向代理靜態(tài)資源403錯誤?6. docker網絡端口映射，沒有方便點的操作方法么？7. 安全性測試 - nodejs中如何防m(xù)ySQL注入8. javascript - 關于apply（）與call（）的問題9. docker start -a dockername 老是卡住，什么情況？10. python - 調用api輸出頁面，會有標簽出現(xiàn)，請問如何清掉？
排行榜
熱門標簽
網公網安備