I've successfully centered my h1 in a div using the following CSS properties:
text-align: center;
line-height: 150px;
vertical-align: top;Now, I'm facing a challenge where I want to position an image in the top-left corner of the text. I want it to remain fixed in that position regardless of window size changes. However, when I tried using position: absolute / fixed for the image and adjusting the top and left percent values, the image moved relative to the text (h1) when the window size changed.
As a beginner in CSS and HTML, I'm struggling to understand what's happening on the screen and how to solve this issue.
.container {
margin: auto;
}
.logo {
height: 150px;
text-align: center;
line-height: 150px;
vertical-align: top;
font-size: 50px;
background-image: url(../img/forest.jpeg);
background-position: 30% 20%;
}
.logo h1 {
font-family: Coiny-Regular;
color: skyblue;
}
.logo img {
position: fixed;
height: 2.5em;
top: 7%;
left: 30%;
}<div class="container">
<div class="logo">
<h1> Example </h1>
<img src="img/image.png" />
</div>
</div>