我試圖在該頁面的第一個 div 內包含一個圖像,但由於某種原因它位於該頁面之外。所有資源都位於彈性盒中。當我將文字放入該 div 中而不是圖像時,它工作得完全正常。
我用紅色圈出了我正在談論的圖像和 div。 該程式碼片段不會向您展示我在說什麼,因為它不是完整的程式碼。
.landing { height: 100vh; display: flex; align-items: center; justify-content: center; } .introWrapper { width: 1000px; } .intro1 { font-size: 25px; text-align: center; font-family: 'Yapari'; align-items: center; justify-content: center; margin-top: 23px; } .intro2 { font-size: 25px; text-align: center; font-family: 'Yapari'; /* font-weight: 72; */ margin-top: 50px; } #introCircle { border: 2px solid black; border-radius: 50%; width: 230px; height: 70px; margin: auto; } .icons { border: 2px solid black; height: 50px; } .icon1 { width: 30px; }
<div id='landing' className={styles.landing}> <div className={styles.introWrapper}> <div className={styles.icons}> <img src={icon1} className={styles.icon1}/> </div> <div id={styles.introCircle}> <h1 className={styles.intro1}>HELLO I'M</h1> </div> <LastName /> <h1 className={styles.intro2}>A FULL STACK DEVELOPER</h1> </div> </div>
P粉2310799762024-04-04 00:53:12
據我了解,您已經為 div“圖標”提供了高度。將 height
改為 min-height
.icons { border: 2px solid black; min-height: 50px; }