Css 离子2-如何使离子按钮的图标和文字在两行？

形势：

在我的爱奥尼亚2应用程序中，我需要有两行菜单按钮：图标和文本

问题是，不知何故，离子按钮指令强制按钮在一条线上

我需要的离子按钮指令，以确保按钮始终有正确的格式和相应的定位。 我只需要那个按钮在两行上

这是我尝试的html和css：

HTML：

菜单

主页


登录

CSS：

.menuSubTitle{
字号：0.6em；
浮动：左；
显示：块；
明确：两者皆有；
}

问题：

如何在两行上制作离子按钮

---

谢谢

你的思路是对的。需要稍加修改，它才能工作

这是我的标记：

<button ion-button block color="menu-o">
    <div>
        <ion-icon name="flash"></ion-icon>
        <label>Flash</label>
    </div>
</button>

闪光

内部的

就是诀窍。此标记只需将

元素设置为

display:block

---

因为

已经是块级元素。它可能只是按原样工作。

这将实现以下功能：

.button-inner {
  flex-flow: column;
}

---

这会将元素顺序从水平更改为垂直。

如果您想让按钮更漂亮一点，则必须更改按钮高度。（例如，带有图标边距）

只需将类名添加到按钮中

点击我

干得好！谢谢

.button-icon-top {
  height: 5em;
  .button-inner {
    flex-flow: column;

    .icon {
      margin-bottom: 10px;
      font-size: 2em;
    }
  }
}