我试图在该页面的第一个 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>
据我了解,您已经为 div“图标”提供了高度。将
height
更改为min-height