Ionic v3 对齐按钮和图标

Posted 2023-03-05

【中文标题】Ionic v3 对齐按钮和图标

【英文标题】：Ionic v3 align button and icon

【发布时间】：2018-09-22 12:32:20

【问题描述】：

在ionic creator(v3) 上创建按钮时，我可以创建这样的按钮

但是当我导出模板时，它呈现如下：

这是我的 html：

<button ion-button icon-end block color="energized">
      <span>Edit</span>
      <ion-icon name="create"></ion-icon>
</button>

如何正确对齐按钮和图标，使图标位于末尾，按钮文本居中。有没有内置的方法可以使用离子指令来做到这一点？还是我必须创建自定义 CSS 来实现这一点？

【问题讨论】：

不要发布图片，而是发布代码。

【参考方案1】：

从css，你可以添加

button ion-icon 
    position: absolute;
    right: 20px;

选择器可以是button[icon-end][block] ion-icon...