如何解决如何在动态且居中的 flexbox 中格式化视差图像
我正在尝试设计一个个人网站,我对 CSS 和 HTML 比较陌生。我的问题是我想要的文本旁边的徽标不在 flexbox 中居中。我希望能够使其在 flexbox 居中(在 x 方向),即使窗口被调整大小。我也希望能够保持视差效果。
这是我的代码:
.parallax-education{
background-image: url("https://www.kojinagatabrown.me/wp-content/uploads/2021/06/BlockU_400px-300x300.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
height: 90%;
}
.parallax-work{
background-image: url("https://www.kojinagatabrown.me/wp-content/uploads/2021/06/EAWlogo-300x79.png");
background-attachment: fixed;
background-repeat: repeat-x;
}
<body style="background-color: black; color: white; font-family: Trebuchet MS">
</body>
<!---start of style--->
<style>
.welcome {
padding-top: 300px;
padding-bottom: 500px;
position: center;
text-align: center;
}
.welcome dev {
border: 1px #ccc solid;
}
.education-container {
padding-top: 500px;
padding-bottom: 500px;
height: 250px;
display: flex;
}
.education-container div {
padding: 10px;
border: 1px #ccc solid;
}
.education-text {
padding-top: 50px;
}
.education-image {
}
.work-container {
padding-top: 500px;
padding-bottom: 500px;
display: flex;
}
.work-container div {
border: 1px #ccc solid;
padding: 10px;
}
.work-image {
flex: 1;
}
.work-text {
flex: 4;
}
</style>
<!---start of layouts--->
<div class="welcome">
<h1 style="color: white">
KOJI NAGATA-BROWN
</h1>
<h3>
Hello,my name is Koji. Let me tell you about myself.
</h3>
</div>
<div class="education-container">
<div class="education-text">
<h3>
EDUCATION
</h3>
<p>
Currently a sophmore at the University of Utah. Expected Graduation 2023.
</p>
</div>
<div class="education-image">
<div class="parallax-education">
<img src="https://www.kojinagatabrown.me/wp-content/uploads/2021/06/BlockU_400px-300x300.png",style="opacity: 0.0;">
</div>
</div>
</div>
<div class="work-container">
<div class="work-image">
<div class="parallax-work">
<img src="https://www.kojinagatabrown.me/wp-content/uploads/2021/06/EAWlogo-300x79.png",style="opacity: 0.0;">
</div>
</div>
<div class="work-text">
<h3>
WORK EXPERIENCE
</h3>
<p>
I have worked at Education at Work for almost 2 years. During my time I have provided
technical support for customers using Windows and Microsoft Office.
</p>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。