如何使文本显示在按钮图标下方(Material UI)

Question

基本上，这是我现在的按钮

我想让 Dummy Button 文本显示在下方图标，我该怎么做？
这是我的代码

<Button className={classes.dummyButton}>
  <Image
   src="/buttonImage1.webp"
   alt="buttonimage1"
   width={48}
   height={48}
   />
<span>Dummy Button</span>
</Button>

Styles.js

dummyButton: {
    backgroundColor: 'green',
  },

Answer 1

尝试在图像和 div 之间添加一个 <br /> 标签。这就是我的意思。这将帮助你https://codepen.io/ash_000001/pen/OJOQaGp?editors=1100

<Button className={classes.dummyButton}>
  <Image
   src="/buttonImage1.webp"
   alt="buttonimage1"
   width={48}
   height={48}
   />

<div>Dummy Button</div>
</Button>
Styles.js

dummyButton: {
    backgroundColor: 'green',
 
  },

Answer 2

我想你可以把你的图片标签放在另一个 span 中，并将其显示更改为 block。

试试这个：

<Button className={classes.dummyButton}>
 <span className={classes.mySpan}>
  <Image
   src="/buttonImage1.webp"
   alt="buttonimage1"
   width={48}
   height={48}
   />
</span>
<div>Dummy Button</div>
</Button>

你的 class 样式应该是这样的：

.mySpan {
       display: 'block'
    }

Answer 3

您想为按钮内的 column-direction 元素放置设置 display: 'flex' 和 flexDirection: 'column'：

dummyButton: {
    backgroundColor: 'green',
    display: 'flex',
    flexDirection: 'column'
  },

Answer 4

在 button 中使用 div 在语义上是“不正确的”。您应该改用 span 元素。

话虽如此，Button 组件使用 flexbox 来控制内容的 layout/alignment。要垂直对齐内容（因此图标在文本上方），您只需将 flex-direction 更改为 column.

style.js

dummyButton: {
    backgroundColor: 'green',
    flexDirection: 'column'
  },

<Button className={classes.dummyButton}>
  <Image
   src="/buttonImage1.webp"
   alt="buttonimage1"
   width={48}
   height={48}
   />
   <span>Dummy Button</span>
</Button>

如何使文本显示在按钮图标下方(Material UI)

How to make texts appear below icons in Buttons (Material UI)

html

javascript

reactjs

material-ui