我试图在页面的第一个div中包含一个图像,但由于某种原因,它在第一个div之外。所有的资源都在一个flexbox中。当我在div中放置文本而不是图像时,它工作得非常好。
我已经用红色圈出了我所谈论的图像和div。代码片段不会显示我所谈论的内容,因为它不是完整的代码。
如果有人需要完整的代码,这里是github存储库:github.com/hiashley/Ashley-Yu-React-Portfolio
第一节第一节第一节第一节第一次
.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>
2条答案
按热度按时间gojuced71#
向className添加样式,而不是直接向html标记添加样式。
标记样式为全局样式,模块className样式为局部样式。
s8vozzvw2#
当我检查代码,你已经添加了位置“绝对”到“img”标签,这就是为什么图像是去外面到您的div.你必须添加类,然后添加CSS到图像标签.
View Screenshot