Как вставить кнопку посередине изображения?

Question

Я хочу разместить кнопку поиска в середине изображения.Но моя кнопка оказалась внизу и снаружи изображения.

Вы можете увидеть вживую на www.emeupci.com

Вот мой HTML-код:

<div class="container-fluid headerimage">
  <div class="col-md-12">
    <img class="img-fluid" src="https://emeupci.com/static/users/img/map.png" alt="map" style="width: 100%;">
    <div class="dropdown">
      <button onclick="myFunction()" class="dropbtn dropdown-toggle" 
      style=" border: 26px solid #f9f9f9;
      cursor: pointer;
      font-weight: bold; background-color: #447193;
      color: white; padding: 8px; border-radius: 0px;
      font-size: 16px;);">Search for a church</button>
      <div id="myDropdown" class="dropdown-content">
        <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
      </div>
    </div>
  </div>
</div>

Answer 1

Если вы сделаете свою карту фоновым изображением вместо элемента img, вы можете наложить свою кнопку поверх изображения, используя этот макет.Родительский div должен быть относительно позиционирован, а кнопка должна быть абсолютно позиционирована внутри родительского div.

<div class="parent">
    <div class="child">
        button go here
    </div>
</div>    

.parent {
    position: relative;
    background: url("Images/") center no-repeat; /* <-- path to your map image here*/
    background-size: cover;
    width: 300px;
    height: 500px;
}
.child { /*This class styles your button or your buttons container*/
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    background-color: #abcf66;
    bottom: 40px; /* adjust this to your liking*/
    width: 80px;
    height: 60px;
}