基本上，這是我現在的按鈕
我想讓Dummy Button文字出現在圖示下方，我該怎么做？
這是我的代碼
<Button className={classes.dummyButton}>
<Image
src="/buttonImage1.webp"
alt="buttonimage1"
width={48}
height={48}
/>
<span>Dummy Button</span>
</Button>
樣式.js
dummyButton: {
backgroundColor: 'green',
},
uj5u.com熱心網友回復：
我認為您可以將影像標簽放在另一個跨度中并將其顯示更改為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>
你的班級風格應該是這樣的：
.mySpan {
display: 'block'
}
uj5u.com熱心網友回復：
嘗試<br />在影像和 div 之間添加一個標簽。這就是我的意思。這將對您有所幫助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',
},
uj5u.com熱心網友回復：
您想在按鈕內設定display: 'flex'和flexDirection: 'column'放置列方向元素：
dummyButton: {
backgroundColor: 'green',
display: 'flex',
flexDirection: 'column'
},
uj5u.com熱心網友回復：
div在 a 中使用 a在語意上是“不正確的” button。您應該改用該span元素。
話雖如此，Button 組件使用 flexbox 來控制內容的布局/對齊方式。要垂直對齊內容（因此圖示位于文本上方），您只需將 flex-direction 更改為 column。
樣式.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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/427816.html
標籤：javascript html 反应 材料-ui
下一篇：如何過濾陣列以匹配引數值與反應