我试图在该页面的第一个 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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
据我了解,您已经为 div“图标”提供了高度。将
height更改为min-height.icons { border: 2px solid black; min-height: 50px; }