Having some trouble with the HTML code I've been working on. Here's what I have:
<div class="container-fluid cover">
<div class="container search">
<h1 class="search-carport">Search your carport</h1>
<input type="text" placeholder="Search...">
</div>
</div>
Within my container fluid, there is a picture acting as a background cover. My goal is to overlay a <h1> and an <input> on top of this picture to create a search bar effect.
Here's the CSS I've written for this setup, including styling for the .cover image:
.cover {
background-image: url("../img/cover.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 60%;
height: 525px;
}
.search {
position: relative;
text-align: center;
height: 525px;
}
Although the <h1> and <input> are centered on the page, they appear at the top rather than in the middle. I've tried using different alignment properties like vertical-align: middle; and align-item: center;, but so far, nothing has worked as expected.
If I missed any crucial details or didn't explain something clearly enough, I apologize. Still learning the ropes in web development!