-1
A
回答
1
將課程添加到您的ion-item
。
HTML:
<ion-item class="my-item">
<ion-badge>150</ion-badge>
<button ion-button>My Button</button>
</ion-item>
而下面的CSS的樣式添加到ion-label
孩子你ion-item
的。
SCSS:
.my-item {
ion-label {
display: flex;
flex-direction: row;
align-items: baseline
}
}
UPDATE:
代碼和與圖標導致添加到按鈕:
HTML:
<ion-item class="my-item">
<ion-badge>150</ion-badge>
<button ion-button icon-end>My Button
<ion-icon name="arrow-down"></ion-icon>
</button>
</ion-item>
SCSS:
.my-item {
ion-label {
display: flex;
flex-direction: row;
align-items: baseline
}
ion-icon {
margin-left: 5px;
}
}
此外,我增加了一個CSS規則爲<ion-icon>
來獲取文本並在該按鈕的圖標之間索姆空間。
-1
證明內容:中心;將工作!
ion-badge {justify-content: center; }
+1
花點時間閱讀幫助中心的[編輯幫助](// stackoverflow.com/editing-help)。堆棧溢出的格式與其他站點不同。 – FrankerZ
相關問題
- 1. 垂直對齊引導徽章和文本中的按鈕
- 2. 導航菜單項「徽章」垂直對齊
- 3. 垂直對齊
- 4. 垂直對齊
- 5. 垂直對齊
- 6. CSS垂直對齊稍微偏離
- 7. 垂直對齊:底部的子div
- 8. HTML垂直對齊
- 9. 垂直對齊列
- 10. CSS垂直對齊
- 11. 垂直對齊DIV
- 12. 垂直對齊div
- 13. 垂直對齊CSS
- 14. 垂直對齊IMG
- 15. CSS垂直對齊
- 16. UITextField垂直對齊
- 17. 垂直對齊離子圖標和文本
- 18. 在Android上垂直對齊離子標題
- 19. 與導航無序列表中的徽標img垂直對齊
- 20. 如何垂直對齊移動網頁上的徽標
- 21. 垂直對齊SlickGrid頭垂直文本
- 22. 使用垂直對齊css垂直對齊文本
- 23. 將子類與父類垂直對齊
- 24. 如何將css柱子垂直對齊?
- 25. 的NSTextField垂直對齊
- 26. 標籤的垂直對齊
- 27. SPAN的CSS垂直對齊
- 28. Android SwitchCompat的垂直對齊?
- 29. 離子推送通知和徽章
- 30. 離子範圍和徽章重疊
您是否解決了此問題? – robbannn