我试图在图像中间找到我的搜索栏。我尝试遵循代码,但仍然不起作用。有什么想法吗?
.headerimage{ background:#000; position:relative;}
.btn-wrapper{ text-align:center; position:absolute; bottom: 50px; margin: 50 auto; width:100%;}
.img-responsive{
width:100% !important;
border-radius:0 0 5px 5px !important;
}
<section id="contact border-bottom">
<div class="container">
<div class="row">
<div class="col-lg-12 mx-auto text-left">
<h2 class="section-heading">Locate a Store!</h2>
<br>
<p class="mb-5"> Some Text </p>
</div>
</div>
<div class="container-fluid headerimage" style="padding:0 !important">
<div class="col-md-12" style="padding:0 !important">
<img class="w3-image" src="{% static 'locator/img/map.png' %}" alt="map" width="1500" height="500">
</div>
<div class="container">
<div class="btn-wrapper">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</section>
.btn-wrapper {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}