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

Posted 2023-03-17

【中文标题】CSS 菜单布局。如何在图标下方放置文字？

【英文标题】：CSS Menu layout. How to place text below Icon?

【发布时间】：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，我会从这里弄清楚

【参考方案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。