Javascript CSS菜单布局。如何在图标下方放置文本？

我下面有一个沙箱。我已将侧边栏的宽度设置为固定宽度。我试图使它，使菜单文本在图标下面，但文本似乎根本没有出现，当我试图用div或span包装它

我需要一个弹性容器吗

      <Menu.Item key="1" style={{ height: 80 }}>
      <div style={{height: 80, display: "flex", textAlign: "center"}}>
        <Icon type="pie-chart" />
        <span>Option 1</span>
        </div>
      </Menu.Item>

选择1

---

我如何才能成功地实现下面的布局？

下面已经尝试并显示了类似的布局 链接： 检查解决方案是否有助于您使用HTML+CSS技巧

<Menu.Item key="1" style={{ min-height: 80 }}>
   <div style={{min-height: 80, height: "auto", display: "flex", textAlign: "center"}}>
      <Icon type="pie-chart" style={{display: "block"}}>/>
      <span>Option 1</span>
   </div>
</Menu.Item>

/>
选择1

结果：

将“宽度”值更改为大于74的值，如200

---

请展示您的尝试，您可以使用flex box来实现此目的@demkovych是否可以像上面的例子一样使用类名而不是选择器？我不知道ant framework。@demkovych谢谢dem，我将从这里找到答案