CSS Menu layout. How to place text below Icon?

Question

I have a sandbox below. I have set the width of the sidebar to be fixed. I'm trying to make it so that the menu text is below the icon however the text doesn't seem to appear at all when I try to wrap it with div or span.

Would I need to have a flex container?

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

How can I successfully achieve below layout?

You can use flex-box to reach this. https://codesandbox.io/s/cocky-elgamal-id7mf?fontsize=14&hidenavigation=1&theme=dark — demkovych, Jan 28 '20 at 10:09
@demkovych is it possible to use class names instead of the selector like my example above? — Freddy., Jan 28 '20 at 10:16

score 0 · Answer 1 · answered Jan 28 '20 at 10:09

0

Similar is already tried and shown here below Link : How do I add Add text below font awesome icon Links? Check if solution helps to you with HTML+CSS trick

answered Jan 28 '20 at 10:09

Monika Kumbhar

45
2
12

score 0 · Answer 2 · answered Jan 28 '20 at 10:51

0

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

answered Jan 28 '20 at 10:51

Maf

696
1
8
23

score 0 · Answer 3 · answered Jan 28 '20 at 22:57

0

RESULT:

Change width value to something greater than 74 like 200.

answered Jan 28 '20 at 22:57

Wilson

9,006
3
42
46

CSS Menu layout. How to place text below Icon?

3 Answers3