CSS Макет меню. Как разместить текст под значком? - PullRequest
Новая
       30

CSS Макет меню. Как разместить текст под значком?

0 голосов
/ 28 января 2020

У меня есть песочница ниже. Я установил ширину боковой панели, которая будет исправлена. Я пытаюсь сделать так, чтобы текст меню находился ниже значка, однако текст, кажется, вообще не появляется, когда я пытаюсь обернуть его с помощью 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>

Edit upbeat-mirzakhani-hhm7v

.

Как мне успешно выполнить приведенный ниже макет?

Ответы [ 3 ]

0 голосов
/ 28 января 2020 
<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>
0 голосов
/ 29 января 2020

РЕЗУЛЬТАТ:

enter image description here

Измените значение ширины на значение, большее 74, например 200.

enter image description here

0 голосов
/ 28 января 2020

Подобное уже опробовано и показано здесь ниже. Ссылка: Как добавить Добавить текст под шрифтом?

...