CSS 菜单布局。如何在图标下方放置文字？答案

【问题标题】：CSS Menu layout. How to place text below Icon?CSS 菜单布局。如何在图标下方放置文字？
【发布时间】：2020-05-13 17:15:40
【问题描述】：

我在下面有一个沙箱。我已将侧边栏的宽度设置为固定。我正在尝试使菜单文本位于图标下方，但是当我尝试用 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>

如何才能成功实现以下布局？

【问题讨论】：

请展示您的尝试
你可以使用 flex-box 来达到这个目的。 codesandbox.io/s/…
@demkovych 是否可以像我上面的示例那样使用类名而不是选择器？
我不知道 ant 框架。
@demkovych 谢谢 dem，我会从这里弄清楚

标签： javascript css layout flexbox

【解决方案1】：

类似的已经尝试过并在下面显示链接：How do I add Add text below font awesome icon Links? 检查解决方案是否对您的 HTML+CSS 技巧有帮助

【讨论】：

【解决方案2】：

<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>

【讨论】：

【解决方案3】：

结果：

将宽度值更改为大于 74 的值，例如 200。

【讨论】：